/* =========================================================================
gids.css — de bouwdoos voor de gidsartikelen (29 okt 2026)
Hoort NA de eigen
Dan wint dit bestand bij gelijke voorrang van de pagina-eigen regels, en
hoeft er in die oude regels niets weg. Alle klassenamen beginnen met een
g, zodat niets botst met site.css (.hero, .wrap, .knop, .stap, .ic,
.klein, .raster) of met de pagina zelf (.kader, .cta, .chips, .verwant).
Cloudflare Pages honoreert geen eigen Cache-Control op losse bestanden,
dus de versie staat in de verwijzing: /gids.css?v=1. Wijzig je dit
bestand, hoog dat nummer dan op elke pagina op die het laadt.
========================================================================= */
/* ---------- 1. de kleuren ----------
De meeste komen uit site.css. Twee niet:
--g-oker site.css heeft --zand-donker (#B98E45), maar dat haalt op creme
maar 2,58:1 [GEMETEN 29 okt]. Te weinig voor tekst. Hier staat
#8A6418 uit het goedgekeurde voorbeeld: 4,63:1 op creme.
--g-okervlak bewust creme (#F4EEDD) en niet zand (#E6D8BC): op zand haalt
dezelfde oker maar 3,81:1 [GEMETEN 29 okt].
In de donkere stand draaien beide mee met site.css. */
:root{
--g-oker:#8A6418;
--g-okervlak:var(--creme);
--g-rood:var(--rood);
--g-roodvlak:var(--rood-licht);
--g-kop:var(--groen-accent); /* de kleur van elke h2: overal gelijk */
--g-accent:var(--groen-accent); /* het accent van dit artikel, zie blok 18 */
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){ --g-oker:#D2AD6A; }
}
:root[data-theme="dark"]{ --g-oker:#D2AD6A; }
/* ---------- 2. de koppen in het handschrift ----------
Besluit Chayen 29 okt: h2 in Caveat, groen, zoals "Snel bijhouden" in de
app. h1 blijft Bricolage. Caveat loopt laag, vandaar de grotere maat en
de krappe regelafstand. */
main h2{
font-family:var(--hand);
font-weight:700;
font-stretch:normal;
letter-spacing:0;
font-size:2.05rem;
line-height:1.08;
color:var(--g-kop);
margin:2.6rem 0 .6rem;
text-wrap:balance;
}
main h3{font-stretch:75%}
.ghand{
display:block;
font-family:var(--hand);
font-weight:700;
font-size:1.5rem;
line-height:1.1;
color:var(--g-kop);
}
@media(max-width:480px){ main h2{font-size:1.85rem} }
/* ---------- 3. de blikvanger bovenaan ----------
De sfeerfoto loopt tot aan de rand van het scherm, en het groene blok
met het korte antwoord ligt er met de bovenkant overheen. */
main img.ghero{
display:block;
/* GEMETEN 30 okt op 390 px: de foto werd 350 px breed, met 40 px wit rechts.
site.css heeft een kale regel `img{max-width:100%}`, en die klemde de
calc() terug naar de breedte van de tekstkolom. max-width:none zet dat
voor deze ene foto uit. */
max-width:none;
width:calc(100% + 2.5rem);
margin:0 -1.25rem;
border-radius:0;
aspect-ratio:16/10;
object-fit:cover;
height:auto;
}
.gkort{
position:relative;
background:var(--groen);
color:var(--creme-vast);
border-radius:var(--hoek-groot);
padding:1.1rem 1.3rem;
margin:-1.8rem .25rem 1.4rem;
box-shadow:var(--schaduw-groen);
}
.gkort .glabel{
display:block;
font-size:.72rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--zand-vast);
margin-bottom:.3rem;
}
.gkort p{margin:0;color:var(--creme-vast)}
.gkort strong{color:var(--creme-vast)}
.gkort a{color:var(--zand-vast)}
/* ---------- 4. de inhoud als knoppen ----------
De bestaande blijft staan, met open erbij,
zodat de knoppen meteen zichtbaar zijn en de tekst van de samenvatting
niet verdwijnt. Deze regels winnen van .springknoppen .chips a omdat ze
drie klassen tellen tegen twee klassen plus een element. */
.gspring{margin:0 0 1.6rem}
.gspring>summary{
font-size:.72rem;
letter-spacing:.14em;
color:var(--zacht);
}
.gspring .gchips{
display:flex;
flex-wrap:nowrap;
gap:8px;
overflow-x:auto;
scrollbar-width:none;
padding:.5rem 1.25rem .5rem 0;
margin:0 -1.25rem 0 0;
}
.gspring .gchips::-webkit-scrollbar{display:none}
.gspring .gchips a{
flex:0 0 auto;
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--pil);
padding:11px 15px;
font-size:.9rem;
color:var(--inkt);
text-decoration:none;
white-space:nowrap;
}
.gspring .gchips a:hover{border-color:var(--g-accent);color:var(--g-accent)}
/* ---------- 5. kaarten met icoon ----------
Voor opsommingen van redenen of signalen. De of
blijft wat hij
is; alleen het bolletje gaat eraf en het icoon komt ervoor. */
/* LET OP: de kaart is bewust GEEN grid. In een grid wordt elk stuk losse
tekst naast een een eigen cel, en dan valt de zin woord voor
woord af in een kolom van 44 px. [GEMETEN 29 okt] Daarom: een gewoon blok
met ruimte links, en het icoon absoluut in die ruimte. */
.gkaarten{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:10px}
.gkaarten>li{
position:relative;
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--hoek);
padding:13px 15px 13px 71px;
margin:0;
font-size:.97rem;
color:var(--zacht);
}
.gkaarten>li>div>strong:first-child,
.gkaarten>li>strong:first-child{
display:block;
color:var(--inkt);
font-size:1.02rem;
font-weight:600;
}
.gkaarten .gic{
position:absolute;left:15px;top:13px;
width:44px;height:44px;
border-radius:var(--hoek-klein);
background:var(--vlakzacht);
display:grid;place-items:center;
}
.gkaarten .gic svg{
width:24px;height:24px;fill:none;stroke:var(--g-accent);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* ---------- 6. Herkenbaar? ----------
Het zandkleurige kader, met het eerste woord in het handschrift. */
.gherk{
background:var(--creme);
border-radius:var(--hoek);
padding:1rem 1.2rem;
margin:1.4rem 0;
box-shadow:none;
color:var(--inkt);
}
.gherk>strong:first-child,
.gherk>p:first-child>strong:first-child{
display:block;
font-family:var(--hand);
font-weight:700;
font-size:1.55rem;
line-height:1.1;
color:var(--g-accent);
margin-bottom:.15rem;
}
.gherk p{margin:0}
/* ---------- 7. de balk met momenten ----------
Alleen met momenten die al in de tekst staan. Decoratief: aria-hidden. */
.gband{
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--hoek);
padding:14px 14px 11px;
margin:1.2rem 0;
}
.gband .gbalk{
display:grid;
grid-template-columns:1.2fr 1fr 1.6fr;
height:34px;
border-radius:var(--pil);
overflow:hidden;
font-size:.75rem;
font-weight:600;
}
.gband .gbalk span{display:grid;place-items:center;text-align:center;padding:0 4px}
.gband .gb1,.gband .gb3{background:var(--groen-licht);color:var(--g-accent)}
.gband .gb2{background:var(--groen);color:var(--creme-vast)}
.gband small{
display:flex;justify-content:space-between;gap:6px;
color:var(--zacht);font-size:.75rem;margin-top:6px;
}
/* ---------- 8. genummerde stappen ----------
De bestaande blijft een ; het nummer komt uit een teller, zodat
er geen cijfer in de tekst hoeft. */
.gstappen{list-style:none;counter-reset:gstap;margin:1.1rem 0;padding:0;display:grid;gap:10px}
.gstappen>li{
counter-increment:gstap;
position:relative;
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--hoek);
padding:13px 15px 13px 69px;
margin:0;
font-size:.97rem;
color:var(--zacht);
}
.gstappen>li::before{
content:counter(gstap);
position:absolute;left:15px;top:13px;
width:42px;height:42px;
border-radius:50%;
background:var(--groen);
color:var(--creme-vast);
font-family:var(--kop);font-weight:800;font-stretch:75%;
font-size:1.25rem;
display:grid;place-items:center;
}
.gstappen>li>strong:first-child{
display:block;
color:var(--inkt);
font-size:1.02rem;
font-weight:600;
}
/* ---------- 9. de opbouwtrap ----------
Een tabel van zeven stappen, als trap die je opklimt. De koppen van de
tabel blijven in de HTML staan (voor voorleessoftware), maar zijn op het
scherm niet nodig: elke kaart laat zien wat hij is.
Boven 760 px blijft het gewoon een tabel. */
.gtrap{width:100%;border-collapse:collapse;background:none;margin:1.1rem 0 1.3rem}
.gtrap th,.gtrap td{border-bottom:1px solid var(--rand)}
@media(max-width:760px){
.gtrap,.gtrap tbody,.gtrap tr,.gtrap td{display:block}
.gtrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gtrap tr{
position:relative;
background:var(--kaart);
border:1px solid var(--rand);
border-left:4px solid var(--g-accent);
border-radius:var(--hoek);
padding:12px 14px 12px 52px;
margin:0 0 8px;
}
.gtrap td{border:0;padding:0}
/* de eerste cel is het stapnummer: dat wordt de ronde knop links */
.gtrap td:first-child{
position:absolute;left:10px;top:11px;
width:32px;height:32px;border-radius:50%;
background:var(--groen);color:var(--creme-vast);
font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:1rem;
display:grid;place-items:center;
}
.gtrap td:nth-child(2){font-size:.97rem;color:var(--inkt)}
.gtrap td:nth-child(3){
margin-top:.35rem;font-size:.87rem;color:var(--zacht);
display:flex;gap:7px;align-items:flex-start;
}
/* stap 7 heeft geen "door als"; een leeg vakje toont dan niets */
.gtrap td:nth-child(3):empty{display:none}
.gtrap td:nth-child(3)::before{
content:"";flex:none;
width:14px;height:14px;margin-top:3px;
background:var(--g-accent);
-webkit-mask:var(--g-vink) center/14px no-repeat;
mask:var(--g-vink) center/14px no-repeat;
}
/* de trap zelf: elke volgende stap staat een stukje verder naar rechts */
.gtrap tbody tr:nth-child(2){margin-left:6px}
.gtrap tbody tr:nth-child(3){margin-left:12px}
.gtrap tbody tr:nth-child(4){margin-left:18px}
.gtrap tbody tr:nth-child(5){margin-left:24px}
.gtrap tbody tr:nth-child(6){margin-left:30px}
.gtrap tbody tr:nth-child(7){margin-left:36px}
}
:root{--g-vink:url('data:image/svg+xml;utf8,')}
/* ---------- 10. vraag en waarschuwing ----------
De tabellen met "Wat je vraagt" en "Wanneer je oplet" worden kaarten:
de vraag in het handschrift, het antwoord eronder met een okerlijn. */
.gvraag{width:100%;border-collapse:collapse;background:none;margin:1.1rem 0 1.4rem}
.gvraag thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gvraag,.gvraag tbody,.gvraag tr,.gvraag td{display:block}
.gvraag tr{
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--hoek);
padding:13px 15px;
margin:0 0 9px;
}
.gvraag td{border:0;padding:0}
.gvraag td:first-child{
font-family:var(--hand);
font-weight:700;
font-size:1.35rem;
line-height:1.15;
color:var(--g-accent);
margin-bottom:.3rem;
}
.gvraag td:nth-child(2){
font-size:.95rem;
color:var(--zacht);
border-left:3px solid var(--g-oker);
padding-left:.75rem;
}
.gvraag td:nth-child(2) a{color:var(--g-accent)}
/* ---------- 11. wat je niet doet ---------- */
.gniet{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:8px}
/* Geen grid in de kaart zelf — zie de opmerking bij .gkaarten. Hier ging het
op 30 okt alsnog mis bij pup-alleen-thuis, waar de regels wel met een
beginnen: de zin viel woord voor woord in de kolom van 28 px.
[GEMETEN] Dus: blok met ruimte links, kruisje absoluut in die ruimte. */
.gniet>li{
position:relative;
background:var(--g-roodvlak);
border-radius:var(--hoek-klein);
padding:11px 13px 11px 51px;
margin:0;
font-size:.95rem;
color:var(--inkt);
}
.gniet>li::before{
content:"\00D7";
position:absolute;left:13px;top:11px;
width:28px;height:28px;border-radius:50%;
background:var(--kaart);color:var(--g-rood);
font-weight:700;font-size:1rem;
display:grid;place-items:center;
}
.gniet>li>strong:first-child{display:block;font-weight:600}
/* ---------- 12. een situatie apart ----------
Een uitklapbaar blok. De kop blijft een echte h2 met zijn eigen id, zodat
de springknoppen en de zoekmachine er niets van merken; de tekst eronder
blijft gewoon in de HTML staan. */
.gsit{
background:var(--kaart);
border:1px solid var(--rand);
border-radius:var(--hoek-groot);
margin:0 0 10px;
overflow:hidden;
}
.gsit>summary{
list-style:none;cursor:pointer;
display:grid;grid-template-columns:40px 1fr 20px;gap:12px;align-items:center;
padding:12px 15px;
}
.gsit>summary::-webkit-details-marker{display:none}
.gsit>summary::after{content:"+";font-size:1.4rem;color:var(--zacht);text-align:center;line-height:1}
.gsit[open]>summary::after{content:"\2013"}
.gsit>summary h2{margin:0;font-size:1.5rem;line-height:1.1}
.gsit .gic{
width:40px;height:40px;border-radius:var(--hoek-klein);
background:var(--vlakzacht);display:grid;place-items:center;
}
.gsit .gic svg{
width:22px;height:22px;fill:none;stroke:var(--g-accent);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.gsit .gin{padding:0 15px 2px}
.gsit .gin p:last-child{margin-bottom:1rem}
/* ---------- 13. let op / dierenarts ---------- */
.glet{
border:2px solid var(--g-oker);
background:var(--g-okervlak);
border-radius:var(--hoek-groot);
padding:1rem 1.2rem;
margin:1.4rem 0;
color:var(--inkt);
}
/* .gk is bewust maar EEN zin lang. Stond er eerst een hele alinea in, dan
leek het hele kader vet. [GEZIEN op de schermafbeeldingen van 30 okt] */
.glet .gk{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.glet p+p{font-weight:400}
.glet .gk svg{
flex:none;width:22px;height:22px;margin-top:2px;
fill:none;stroke:var(--g-oker);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
.glet p:last-child{margin-bottom:0}
.glet ul,.glet ol{margin-bottom:0}
/* ---------- 14. voor op de koelkast ----------
Een briefje dat een beetje scheef hangt, met een plakstrookje erboven. */
.gkoel{
position:relative;
background:var(--creme);
color:var(--inkt);
border-radius:6px;
padding:1.3rem 1.2rem 1.1rem;
margin:2rem .25rem;
transform:rotate(-.6deg);
box-shadow:0 4px 14px rgba(22,33,27,.1);
}
.gkoel::before{
content:"";position:absolute;
top:-9px;left:50%;width:70px;height:18px;margin-left:-35px;
background:var(--zand);opacity:.75;transform:rotate(2deg);
}
.gkoel .ghand{color:var(--inkt);font-size:1.75rem;margin-bottom:.4rem}
.gkoel ol{margin:0 0 0 1.2rem}
.gkoel li{margin:.25rem 0}
@media (prefers-reduced-motion:reduce){ .gkoel{transform:none} }
/* ---------- 15. het Pupwijzer-blok ----------
Eén per artikel, onderaan, rustig: een lichte kaart met een dunne rand en
een groene linkerrand. Geen grote knop, alleen een tekstlink. De kop is
een echte h2 gebleven (de tekst van elke h2 blijft staan), maar hij is
klein gezet zodat het blok geen hoofdstuk lijkt. */
.gpw{
background:var(--kaart);
color:var(--inkt);
border:1px solid var(--rand);
border-left:4px solid var(--g-accent);
border-radius:var(--hoek);
padding:1rem 1.2rem;
margin:2rem 0 0;
}
.gpw h2{
font-family:var(--kop);
font-weight:800;
font-stretch:75%;
letter-spacing:-.01em;
font-size:1.12rem;
line-height:1.25;
color:var(--inkt);
margin:0 0 .35rem;
}
.gpw p{margin:0 0 .6rem;font-size:.95rem;color:var(--zacht)}
.gpw .gpwlink{
color:var(--g-accent);
font-weight:600;
text-decoration:none;
display:inline-flex;align-items:center;min-height:44px;
}
.gpw .gpwlink:hover{text-decoration:underline}
/* ---------- 16. verder lezen ---------- */
.gverder{margin:2rem 0 0}
.gverder>h2{margin-bottom:.7rem}
main .gverder .verwant li>a:only-child{
border-radius:var(--hoek);
font-weight:600;
}
main .gverder .verwant li>a:only-child::after{content:" \2192";color:var(--g-accent)}
/* ---------- 17. de productkaart ----------
Het bestaande koopblok, met een gekleurde kop en de maten onder elkaar.
Aan de blokjes van bol zelf verandert niets: die laden nog steeds pas na
toestemming, en de eigen groene knop blijft de terugval. */
.gprod{padding:0;overflow:hidden;border-radius:var(--hoek-groot)}
.gprod .gtop{background:var(--groen-licht);padding:12px 1.2rem}
.gprod .koopkop{margin:0;color:var(--groen-accent)}
.gprod h3{margin:.1rem 0 0}
.gprod>p,.gprod>div{margin-left:1.2rem;margin-right:1.2rem}
.gprod>p:last-child{margin-bottom:1rem}
.gprod .gdl{margin:.9rem 1.2rem 0}
.gprod .gdl p{margin-bottom:.6rem;font-size:.95rem;color:var(--zacht)}
.gprod .gdl .label{
display:block;
font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--zacht);
}
.gprod .gmaat{
border-top:1px solid var(--rand);
margin:.9rem 0 0;
padding:.8rem 1.2rem 0;
}
.gprod .gmaat .bolval{margin:.6rem 0 .8rem}
/* De tweede maat is geen tweede blokje van bol maar een tekstlink: twee
blokjes van dezelfde KONG onder elkaar lezen als hetzelfde product twee
keer. [besluit 30 okt] */
.gprod .gandermaat{
display:inline-flex;align-items:center;min-height:44px;
font-size:.9rem;font-weight:600;color:var(--groen-accent);text-decoration:none;
}
.gprod .gandermaat:hover{text-decoration:underline}
.gprod .bolblok.gevuld{margin:0;padding-top:0;border-top:0}
.gprod .commissie{margin:.8rem 1.2rem 1rem;font-size:.8rem}
/* ---------- 18. per artikel een eigen accent ----------
Zelfde bouwdoos, ander kleuraccent, uit het goedgekeurde voorbeeld.
Het accent kleurt alleen lijnen, iconen en losse woorden — nooit een vlak
met tekst erop, want een accent dat in de donkere stand licht wordt zou
dan onleesbaar zijn. De koppen blijven in elk artikel groen (--g-kop),
net als in het voorbeeld; alleen de blikvanger verschilt.
[GEMETEN 29 okt] rood 5,48:1 licht / 5,97:1 donker op een kaart,
oker 5,36:1 licht / 7,37:1 donker, blauw 4,85:1 / 7,10:1. */
main.g-rood{--g-accent:var(--rood)}
main.g-oker{--g-accent:var(--g-oker)}
main.g-blauw{--g-accent:var(--blauw)}