/*
 * De bouwstenen van de gidspagina (inc/gids.php, templates/gids.php).
 *
 * Een gidspagina is door TempPIM opgebouwd uit bouwstenen (temppim/informatie/bouwstenen.py);
 * elke bouwsteen heeft hier precies één opmaak. Een pagina kiest bouwstenen en schrijft geen
 * eigen stijl. De kleuren, de letter en de hoeken komen uit tp-thema.css (skill ontwerp):
 * rood alleen voor de koopknop en een link, geen schaduw, hoeken van 5 tot 6 pixels.
 *
 * Volgorde: de schil (kop, lijf, rail, zijkolom), dan de bouwstenen op alfabet, dan de
 * breekpunten 1100 en 760.
 */

/* ------------------------------------------------------------------ de schil */

.tpg { display: block; padding-bottom: 44px; }
.tpg-binnen { max-width: var(--tpt-breed); margin: 0 auto; padding: 0 20px; }
.tpg img { max-width: 100%; height: auto; }
.tpg a { color: var(--tpt-rood-diep); }
.tpg h2, .tpg h3, .tpg h4 { margin: 0; }

/* De balk die zegt dat dit een proef is; alleen op de kopie. */
.tpg-proef { margin: 12px 0 0; font-size: 12.5px; color: var(--tpt-ink-zacht); }
.tpg-proef .tpg-binnen > div { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 9px 14px; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 5px; }
.tpg-proef b { color: var(--tpt-ink); }
.tpg-proef a { color: var(--tpt-ink); }

/* De paginakop: soort, h1, de inleiding in een zin of drie, en het beeld ernaast. */
.tpg-kop { margin-top: 12px; }
.tpg-kop .tpg-binnen > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center; padding: 30px 32px; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-kop.zonder-beeld .tpg-binnen > div { grid-template-columns: minmax(0, 1fr); }
.tpg-label { margin: 0 0 10px; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.08em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-kop h1 { margin: 0 0 12px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.15; letter-spacing: -0.02em; }
.tpg-lood { max-width: 64ch; margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--tpt-ink-zacht); }
.tpg-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 400 12px var(--tpt-cijfer); color: var(--tpt-ink-flauw); }
.tpg-kopbeeld { margin: 0; }
.tpg-kopbeeld img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 6px; }
.tpg-kopbeeld.tekening img { width: auto; max-height: 330px; margin: 0 auto; aspect-ratio: auto; object-fit: contain; }
.tpg-kopbeeld.tekening figcaption { text-align: center; }
.tpg-kopbeeld figcaption { margin-top: 7px; font-size: 12px; color: var(--tpt-ink-flauw); }
.tpg-kopknoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

/* Het lijf: links de inhoudsopgave, in het midden de secties, rechts de hulp. */
.tpg-lijf { margin-top: 20px; }
.tpg-lijf > .tpg-binnen { display: grid; grid-template-columns: 228px minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.tpg-lijf.zonder-rail > .tpg-binnen { grid-template-columns: minmax(0, 1fr) 280px; }
.tpg-lijf.volle-breedte > .tpg-binnen { grid-template-columns: minmax(0, 1fr); }
.tpg-rail { position: sticky; top: 132px; padding: 14px 16px; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-rail summary { font: 600 11px var(--tpt-cijfer); letter-spacing: 0.08em; color: var(--tpt-ink-flauw); text-transform: uppercase; list-style: none; cursor: default; }
.tpg-rail summary::-webkit-details-marker { display: none; }
.tpg-rail ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: tpg-rail; }
.tpg-rail li { counter-increment: tpg-rail; margin: 0; }
.tpg-rail a { display: grid; grid-template-columns: 22px 1fr; padding: 6px 0; font-size: 13px; line-height: 1.35; color: var(--tpt-ink); text-decoration: none; border-top: 1px solid var(--tpt-pap); }
.tpg-rail a::before { content: counter(tpg-rail); font: 500 11px var(--tpt-cijfer); color: var(--tpt-ink-flauw); line-height: 1.6; }
.tpg-rail a:hover, .tpg-rail a.actief { color: var(--tpt-rood-diep); }
.tpg-rail a.actief { font-weight: 600; }
.tpg-tekst { display: grid; gap: 16px; min-width: 0; }
.tpg-naast { display: grid; gap: 14px; position: sticky; top: 132px; }
.tpg-naast .tpt-paneel h3 { font-size: 13px; }
.tpg-zijlinks { margin: 0; padding: 0; list-style: none; }
.tpg-zijlinks a { display: block; padding: 9px 12px; font-size: 13px; color: var(--tpt-ink); text-decoration: none; border-top: 1px solid var(--tpt-pap); }
.tpg-zijlinks li:first-child a { border-top: 0; }
.tpg-zijlinks a:hover { color: var(--tpt-rood-diep); }

/* Een sectie: een wit vlak met een kop. */
.tpg-sectie { padding: 26px 28px 28px; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 6px; scroll-margin-top: 140px; min-width: 0; }
.tpg-sectie > h2 { margin-bottom: 10px; font-size: 23px; line-height: 1.25; letter-spacing: -0.015em; }
.tpg-sectie > h3, .tpg-sectie .tpg-tussenkop { margin: 24px 0 8px; font-size: 17px; }
.tpg-sectie p, .tpg-sectie li { font-size: 15px; line-height: 1.68; }
.tpg-sectie p { margin: 0 0 12px; }
.tpg-sectie > p:last-child { margin-bottom: 0; }
.tpg-sectie > * + .tpg-kaarten, .tpg-sectie > * + .tpg-feiten, .tpg-sectie > * + .tpg-vragen, .tpg-sectie > * + .tpg-tabelvak,
.tpg-sectie > * + .tpg-stappen, .tpg-sectie > * + .tpg-service, .tpg-sectie > * + .tpg-tekening, .tpg-sectie > * + .tpg-kleuren,
.tpg-sectie > * + .tpg-downloads, .tpg-sectie > * + .tpg-tip, .tpg-sectie > * + .tpg-letop, .tpg-sectie > * + .tpg-figuur,
.tpg-sectie > * + .tpg-tijdlijn, .tpg-sectie > * + .tpg-galerij { margin-top: 18px; }
.tpg-sectiekop { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.tpg-sectiekop img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-sectiekop h2 { font-size: 23px; line-height: 1.25; letter-spacing: -0.015em; }
.tpg-sectiekop span { display: block; margin-top: 2px; font: 400 12px var(--tpt-cijfer); color: var(--tpt-ink-flauw); }

/* ------------------------------------------------------------------ de bouwstenen */

/* Brug: de weg naar de winkel. De enige plek met de rode koopknop. */
.tpg-brug { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 22px 26px; color: #fff; background: var(--tpt-ink); border-radius: 6px; }
.tpg-brug h2 { font-size: 19px; color: #fff; }
.tpg-brug p { margin: 4px 0 0; font-size: 14px; color: #c9c9ce; }
.tpg-brug .tpg-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-thema .tpg a.tpt-knopje, .tp-thema .tpg a.tpt-knopje:visited { color: #fff; }
.tp-thema .tpg a.tpt-knopje.kaal, .tp-thema .tpg a.tpt-knopje.kaal:visited { color: var(--tpt-ink); background: var(--tpt-vlak); border-color: var(--tpt-lijn-hard); }
.tp-thema .tpg a.tpt-knopje.kaal:hover { border-color: var(--tpt-ink); }
.tp-thema .tpg .tpg-brug a.tpt-knopje.kaal-licht { color: #fff; background: none; border-color: #5a5a60; }
.tpg .tpt-knopje { min-height: 38px; padding: 10px 16px; font-size: 13px; border-radius: 5px; }

/* Chips: een keuze of een filter boven een lijst. */
.tpg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpg-chip { display: inline-flex; gap: 7px; align-items: center; min-height: 38px; padding: 7px 14px; font: 600 13px var(--tpt-schrift); color: var(--tpt-ink); text-decoration: none; cursor: pointer; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn-hard); border-radius: 999px; }
.tp-thema .tpg a.tpg-chip { color: var(--tpt-ink); }
.tpg-chip small { font: 500 11px var(--tpt-cijfer); color: var(--tpt-ink-flauw); }
.tpg-chip:hover { border-color: var(--tpt-ink); }
.tpg-chip.actief, .tpg-chip[aria-pressed="true"] { color: #fff; background: var(--tpt-ink); border-color: var(--tpt-ink); }
.tpg-chip.actief small, .tpg-chip[aria-pressed="true"] small { color: #c9c9ce; }

/* Codes: een foutcode of een lampje met zijn betekenis. */
.tpg-code { display: inline-block; min-width: 38px; padding: 2px 8px; font: 700 12.5px var(--tpt-cijfer); text-align: center; white-space: nowrap; border: 1.5px solid var(--tpt-ink); border-radius: 4px; }
.tpg-lamp { display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -1px; border: 1.5px solid var(--tpt-ink); border-radius: 50%; }

/* Downloads: een document met zijn bron. */
.tpg-downloads { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpg-downloads a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; color: var(--tpt-ink); text-decoration: none; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tp-thema .tpg .tpg-downloads a { color: var(--tpt-ink); }
.tpg-downloads a:hover { border-color: var(--tpt-ink); }
.tpg-downloads b { display: block; font-size: 14.5px; color: var(--tpt-ink); }
.tpg-downloads span { font-size: 12.5px; color: var(--tpt-ink-flauw); }
.tpg-downloads em { font: 600 11px var(--tpt-cijfer); font-style: normal; color: var(--tpt-ink-zacht); }

/* Feiten: een rij getallen die het onderwerp samenvatten. */
.tpg-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tpg-feiten li { padding: 14px 16px; background: var(--tpt-pap); border-radius: 6px; }
.tpg-feiten b { display: block; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.tpg-feiten span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--tpt-ink-zacht); }
.tpg-kop .tpg-feiten { margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.tpg-kop .tpg-feiten b { font-size: 19px; }

/* Figuur en galerij. */
.tpg-figuur { margin: 0; }
.tpg-figuur img { display: block; width: 100%; border-radius: 6px; }
.tpg-figuur figcaption, .tpg-galerij figcaption { margin-top: 7px; font-size: 12.5px; color: var(--tpt-ink-flauw); }
.tpg-galerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.tpg-galerij figure { margin: 0; }
.tpg-galerij img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }

/* Kaarten: een model, een reservoir, een uitkomst. */
.tpg-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpg-kaarten.breed { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tpg-kaarten.smal { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.tpg-kaart { display: flex; flex-direction: column; height: 100%; color: var(--tpt-ink); text-decoration: none; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 6px; overflow: hidden; }
.tp-thema .tpg a.tpg-kaart { color: var(--tpt-ink); }
a.tpg-kaart:hover { border-color: var(--tpt-ink); }
.tpg-kaart > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 10px; background: #fff; border-bottom: 1px solid var(--tpt-pap); }
.tpg-kaart > img.vullend { object-fit: cover; padding: 0; }
.tpg-kaartlijf { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 15px; }
.tpg-kaartlijf small { font: 600 10.5px var(--tpt-cijfer); letter-spacing: 0.07em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-kaartlijf h3 { margin: 3px 0 6px; font-size: 16px; line-height: 1.3; }
.tpg-kaartlijf p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--tpt-ink-zacht); }
.tpg-kaartlijf .tpg-verder { margin-top: auto; font: 600 13px var(--tpt-schrift); color: var(--tpt-rood-diep); }
.tpg-kaartlijf ul { margin: 0 0 10px; padding: 0; list-style: none; }
.tpg-kaartlijf ul li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--tpt-ink-zacht); }
.tpg-kaartlijf ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: var(--tpt-ink); border-radius: 50%; }

/* Kiezer: een paar vragen, en per antwoord de uitkomst. Zonder JavaScript staat alles open. */
.tpg-kiezer fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.tpg-kiezer legend { margin-bottom: 9px; padding: 0; font: 650 16px var(--tpt-schrift); }
.tpg-kiezer legend small { display: block; margin-bottom: 2px; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.08em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.tpg-optie { position: relative; display: block; cursor: pointer; }
.tpg-optie input { position: absolute; opacity: 0; }
.tpg-optie span { display: block; height: 100%; padding: 13px 15px; font-size: 14px; line-height: 1.45; border: 1.5px solid var(--tpt-lijn-hard); border-radius: 6px; }
.tpg-optie b { display: block; font-size: 15px; }
.tpg-optie:hover span { border-color: var(--tpt-ink); }
.tpg-optie input:checked + span { background: var(--tpt-pap); border-color: var(--tpt-ink); box-shadow: inset 0 0 0 1px var(--tpt-ink); }
.tpg-optie input:focus-visible + span { outline: 2px solid var(--tpt-rood); outline-offset: 2px; }
.tpg-uitkomst { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tpt-lijn); }
.tpg-uitkomst > h3 { margin-bottom: 4px; font-size: 18px; }
.tpg-uitkomst > p { color: var(--tpt-ink-zacht); }
.tpg-uitkomst[hidden] { display: none; }

/* Kleuren: de afwerkingen als echte kleur. */
.tpg-kleuren { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tpg-kleuren a, .tpg-kleuren > li > span { display: grid; grid-template-columns: 40px 1fr; height: 100%; box-sizing: border-box; gap: 12px; align-items: center; padding: 11px 13px; color: var(--tpt-ink); text-decoration: none; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tp-thema .tpg .tpg-kleuren a { color: var(--tpt-ink); }
.tpg-kleuren a:hover { border-color: var(--tpt-ink); }
.tpg-kleuren i { display: block; width: 40px; height: 40px; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%), var(--tpg-kleur, #ccc); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; }
.tpg-kleuren b { display: block; font-size: 14.5px; line-height: 1.3; }
.tpg-kleuren small { display: block; margin-top: 2px; font: 400 12px/1.4 var(--tpt-cijfer); color: var(--tpt-ink-flauw); }

/* Kort antwoord: het antwoord in een paar zinnen, voor wie niet verder leest. */
.tpg-kort { padding: 18px 22px; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-left: 4px solid var(--tpt-ink); border-radius: 6px; }
.tpg-kort small { display: block; margin-bottom: 6px; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.08em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-kort p { margin: 0; font-size: 16px; line-height: 1.6; }

/* Nieuws: de berichten als kaart, het nieuwste groot. */
.tpg-uitgelicht { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); color: var(--tpt-ink); text-decoration: none; background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 6px; overflow: hidden; }
.tp-thema .tpg a.tpg-uitgelicht { color: var(--tpt-ink); }
.tpg-uitgelicht:hover { border-color: var(--tpt-ink); }
.tpg-chips[data-tpg-filter] { margin: 12px 0 14px; }
.tpg-uitgelicht { margin-bottom: 12px; }
.tpg-uitgelicht .tpg-beeld { min-height: 300px; }
.tpg-uitgelicht > div { display: flex; flex-direction: column; justify-content: center; padding: 30px 34px; }
.tpg-uitgelicht h2 { margin: 6px 0 10px; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; }
.tpg-uitgelicht p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--tpt-ink-zacht); }
.tpg-beeld { display: block; position: relative; background: var(--tpt-pap); overflow: hidden; }
.tpg-beeld img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tpg-nieuwskaart .tpg-beeld { aspect-ratio: 16 / 10; }
.tpg-beeld.leeg { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #f5f5f6 0 14px, #ededf0 14px 28px); }
.tpg-beeld.leeg span { padding: 6px 14px; font: 650 17px var(--tpt-schrift); letter-spacing: -0.01em; color: var(--tpt-ink-zacht); background: var(--tpt-vlak); border: 1px solid var(--tpt-lijn); border-radius: 999px; }
.tpg-rubriek { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.06em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-rubriek b { padding: 2px 8px; font-weight: 700; color: var(--tpt-ink); border: 1.5px solid var(--tpt-ink); border-radius: 4px; }
.tpg-rubriek time { font-weight: 400; letter-spacing: 0; text-transform: none; }
.tpg-nieuwskaart[hidden], .tpg-uitgelicht[hidden] { display: none; }
.tpg-nieuwskaart h3 { margin: 6px 0 6px; font-size: 16.5px; line-height: 1.3; }
.tpg-archiefkop { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.tpg-archiefkop h2 { font-size: 21px; }
.tpg-leeg { padding: 22px; font-size: 14px; color: var(--tpt-ink-zacht); text-align: center; background: var(--tpt-vlak); border: 1px dashed var(--tpt-lijn-hard); border-radius: 6px; }
.tpg-leeg[hidden] { display: none; }

/* Service: de servicedienst van een fabrikant. */
.tpg-service { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpg-service li { display: flex; flex-direction: column; padding: 16px 18px; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-service h3 { margin-bottom: 8px; font-size: 16px; }
.tpg-service dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 12px; font-size: 13.5px; }
.tpg-service dt { color: var(--tpt-ink-flauw); }
.tpg-service dd { margin: 0; font-family: var(--tpt-cijfer); font-size: 13px; overflow-wrap: anywhere; }
.tp-thema .tpg .tpg-service dd a { color: var(--tpt-ink); }
.tpg-service .tpt-knopje { margin-top: auto; align-self: flex-start; }

/* Stappen: iets doen, in volgorde. */
.tpg-stappen { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: tpg-stap; }
.tpg-stappen > li { counter-increment: tpg-stap; position: relative; min-height: 34px; padding-left: 48px; }
.tpg-stappen > li::before { content: counter(tpg-stap); position: absolute; left: 0; top: 0; width: 32px; height: 32px; font: 700 14px/32px var(--tpt-schrift); color: #fff; text-align: center; background: var(--tpt-ink); border-radius: 50%; }
.tpg-stappen b { display: block; font-size: 15.5px; }
.tpg-stappen p { margin: 2px 0 0; }
.tpg-stappen.klein > li { min-height: 26px; padding-left: 38px; }
.tpg-stappen.klein > li::before { width: 24px; height: 24px; font-size: 12px; line-height: 24px; top: 1px; }
.tpg-antwoord .tpg-stappen { gap: 8px; }

/* Tabel: feiten naast elkaar. Op een telefoon wordt elke rij een kaart. */
.tpg-tabelvak { overflow-x: auto; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-tabel { width: 100%; margin: 0; border-collapse: collapse; }
.tpg-tabel th, .tpg-tabel td { padding: 11px 14px; font-size: 13.5px; line-height: 1.45; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tpt-lijn); }
.tpg-tabel thead th { font: 600 11px var(--tpt-cijfer); letter-spacing: 0.06em; color: var(--tpt-ink-zacht); text-transform: uppercase; white-space: nowrap; background: var(--tpt-pap); }
.tpg-tabel tbody th { font-weight: 650; font-size: 14px; }
.tpg-tabel tbody th small { display: block; font: 400 12px var(--tpt-schrift); color: var(--tpt-ink-flauw); }
.tpg-tabel tbody tr:last-child th, .tpg-tabel tbody tr:last-child td { border-bottom: 0; }
.tpg-tabel td.getal { font-family: var(--tpt-cijfer); font-size: 13px; white-space: nowrap; }
.tpg-tabel tr.groep th { padding: 9px 14px; font: 650 13px var(--tpt-schrift); color: var(--tpt-ink); background: #fbfbfc; border-top: 1px solid var(--tpt-lijn); }
.tpg-tabel .ja, .tpg-tabel .nee { font-weight: 600; }
.tpg-tabel .nee { color: var(--tpt-ink-flauw); font-weight: 400; }
.tpg-bron { margin: 10px 0 0; font-size: 12.5px; color: var(--tpt-ink-flauw); }
.tpg-sectie p.tpg-bron { font-size: 12.5px; }

/* Tekening: een schema met zijn legenda als tekst ernaast (skill tekening). */
.tpg-tekening { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: start; padding: 20px; border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-tekening figure { margin: 0; }
.tpg-tekening img { display: block; width: 100%; }
.tpg-legenda { margin: 0; padding: 0; list-style: none; counter-reset: tpg-legenda; }
.tpg-legenda li { counter-increment: tpg-legenda; position: relative; margin: 0 0 10px; padding-left: 38px; font-size: 13.5px; line-height: 1.55; }
.tpg-legenda li::before { content: counter(tpg-legenda); position: absolute; left: 0; top: 0; width: 25px; height: 25px; font: 700 13px/21px var(--tpt-schrift); color: var(--tpt-rood); text-align: center; border: 2px solid var(--tpt-rood); border-radius: 50%; box-sizing: border-box; }
.tpg-leidingen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--tpt-ink-zacht); }
.tpg-leidingen i { display: inline-block; width: 22px; height: 6px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--tpt-ink); border-radius: 3px; }

/* Tijdlijn: nieuws met een datum. */
.tpg-tijdlijn { margin: 0; padding: 0; list-style: none; }
.tpg-tijdlijn li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--tpt-lijn); }
.tpg-tijdlijn li:first-child { padding-top: 0; border-top: 0; }
.tpg-tijdlijn time { font: 600 12px var(--tpt-cijfer); color: var(--tpt-ink-flauw); line-height: 1.9; }
.tpg-tijdlijn b { display: block; font-size: 15.5px; }
.tpg-tijdlijn p { margin: 3px 0 0; }

/* Tip en let op. */
.tpg-tip, .tpg-letop { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 6px; }
.tpg-tip { background: var(--tpt-pap); }
.tpg-letop { background: #fff7e6; border: 1px solid #f0d9a8; }
.tpg-tip svg, .tpg-letop svg { width: 22px; height: 22px; margin-top: 1px; }
.tpg-tip p, .tpg-letop p { margin: 0; font-size: 14px; line-height: 1.6; }
.tpg-sectie .tpg-tip p, .tpg-sectie .tpg-letop p { font-size: 14px; }
.tpg-tip b, .tpg-letop b { display: block; }

/* Vragen: een storing of een vraag, uitklapbaar, met het antwoord in vaste delen. */
.tpg-zoek { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; }
.tpg-zoek input { flex: 1; min-width: 0; min-height: 42px; padding: 9px 14px; font: 400 14.5px var(--tpt-schrift); border: 1px solid var(--tpt-lijn-hard); border-radius: 6px; }
.tpg-zoek input:focus { outline: 2px solid var(--tpt-rood); outline-offset: 1px; }
.tpg-vragen { display: grid; gap: 8px; }
.tpg-vraag { border: 1px solid var(--tpt-lijn); border-radius: 6px; }
.tpg-vraag[hidden] { display: none; }
.tpg-vraag summary { position: relative; padding: 14px 46px 14px 16px; font: 600 15.5px/1.4 var(--tpt-schrift); list-style: none; cursor: pointer; }
.tpg-vraag summary::-webkit-details-marker { display: none; }
.tpg-vraag summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--tpt-ink); border-bottom: 2px solid var(--tpt-ink); transform: rotate(45deg); }
.tpg-vraag[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.tpg-vraag summary:hover { background: #fbfbfc; }
.tpg-vraag[open] { border-color: var(--tpt-ink-flauw); }
.tpg-vraag[open] summary { border-bottom: 1px solid var(--tpt-pap); }
.tpg-antwoord { padding: 14px 16px 16px; }
.tpg-antwoord > *:last-child { margin-bottom: 0; }
.tpg-antwoord h4 { margin: 14px 0 6px; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.08em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
.tpg-antwoord h4:first-child { margin-top: 0; }
.tpg-antwoord .tpg-tabelvak { margin: 4px 0 12px; }
.tpg-naarservice { margin: 14px 0 0; padding-top: 12px; font-size: 14px; border-top: 1px dashed var(--tpt-lijn-hard); }
.tpg-sectie .tpg-naarservice { font-size: 14px; }

/* ------------------------------------------------------------------ breekpunten */

@media (max-width: 1100px) {
  .tpg-lijf > .tpg-binnen { grid-template-columns: 216px minmax(0, 1fr); }
  .tpg-lijf.zonder-rail > .tpg-binnen { grid-template-columns: minmax(0, 1fr); }
  .tpg-naast { position: static; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 760px) {
  .tpg-binnen { padding: 0 12px; }
  .tpg-kop .tpg-binnen > div { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px; }
  .tpg-kopbeeld { order: -1; }
  .tpg-kopbeeld.tekening { order: 0; }
  .tpg-kopbeeld img { aspect-ratio: 16 / 10; }
  .tpg-lood { font-size: 16px; }
  .tpg-lijf > .tpg-binnen { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tpg-rail { position: static; }
  .tpg-rail summary { cursor: pointer; }
  .tpg-rail summary::after { content: " +"; }
  .tpg-rail[open] summary::after { content: " \2212"; }
  .tpg-rail a { padding: 12px 0; font-size: 14px; }
  .tpg-rail summary { padding: 8px 0; margin: -8px 0; min-height: 44px; display: flex; align-items: center; }
  /* Aanraakdoelen van minstens 44 pixels (skill ontwerp). */
  .tpg .tpt-knopje { min-height: 44px; display: inline-flex; align-items: center; }
  .tpg-zijlinks a { padding: 12px; }
  .tpg-zoek input { min-height: 46px; }
  .tpg-tabel.stapel tbody th a { display: inline-block; padding: 11px 0; }
  .tpg-sectie { padding: 20px 16px 22px; }
  .tpg-sectie > h2, .tpg-sectiekop h2 { font-size: 20px; }
  .tpg-brug { padding: 20px 18px; }
  .tpg-chip { min-height: 44px; }
  .tpg-uitgelicht { grid-template-columns: minmax(0, 1fr); }
  .tpg-uitgelicht .tpg-beeld { min-height: 0; aspect-ratio: 16 / 10; }
  .tpg-uitgelicht > div { padding: 20px 18px; }
  .tpg-uitgelicht h2 { font-size: 21px; }
  /* Het nieuws als lijst: klein beeld links, de titel ernaast, de inleiding weg. */
  .tpg-nieuwskaart .tpg-kaart { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
  .tpg-nieuwskaart .tpg-beeld { aspect-ratio: auto; min-height: 100%; }
  .tpg-nieuwskaart .tpg-beeld.leeg span { padding: 3px 8px; font-size: 11.5px; }
  .tpg-nieuwskaart .tpg-kaartlijf { padding: 12px 14px; }
  .tpg-nieuwskaart .tpg-kaartlijf > p:not(.tpg-rubriek), .tpg-nieuwskaart .tpg-verder { display: none; }
  .tpg-nieuwskaart h3 { margin-bottom: 0; font-size: 15.5px; }
  .tpg-tekening { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .tpg-tijdlijn li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tpg-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpg-galerij figure:nth-child(3) { display: none; }
  .tpg-vraag summary { padding: 15px 44px 15px 14px; }
  /* Een tabel met de klasse stapel wordt per rij een kaart, met het kolomlabel ervoor. */
  .tpg-tabel.stapel thead { display: none; }
  .tpg-tabel.stapel, .tpg-tabel.stapel tbody, .tpg-tabel.stapel tr, .tpg-tabel.stapel th, .tpg-tabel.stapel td { display: block; width: auto; }
  .tpg-tabel.stapel tr { padding: 12px 14px; border-bottom: 1px solid var(--tpt-lijn); }
  .tpg-tabel.stapel tr:last-child { border-bottom: 0; }
  .tpg-tabel.stapel tr.groep { padding: 0; }
  .tpg-tabel.stapel th, .tpg-tabel.stapel td { padding: 2px 0; border: 0; white-space: normal; }
  .tpg-tabel.stapel tbody th { margin-bottom: 4px; font-size: 15px; }
  .tpg-tabel.stapel td[data-kop]::before { content: attr(data-kop) ": "; font: 600 11px var(--tpt-cijfer); letter-spacing: 0.04em; color: var(--tpt-ink-flauw); text-transform: uppercase; }
  .tpg-tabel.stapel td.getal { white-space: normal; }
  .tpg-tabel.stapel td:empty { display: none; }
  .tpg-kaarten.smal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ------------------------------------------------------------------ merken en de kiezer
 * Toegevoegd na de eerste beoordeling (3 oktober 2026): de merken met hun logo, de kiezer met
 * aanvinkvragen, kleurstalen en de uitkomst per merk. De breekpunten staan er meteen bij. */

.tpg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* De merken als knop met hun logo: de witte plaat van de home (skill merklogos), zonder schaduw.
   De plaat is breder dan het breedste logo, want een logo dat de browser verkleint verschuift
   zijn schrijflijn. */
.tpg-merken { display: grid; grid-template-columns: repeat(4, 148px); gap: 8px; }
.tpg-merk { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 10px; font: 700 15px var(--tpt-schrift); text-decoration: none; background: #fff; border-radius: 6px; }
.tp-thema .tpg a.tpg-merk { color: var(--tpt-ink); }
.tpg-merk:hover, .tpg-merk:focus-visible { outline: 3px solid var(--tpt-rood); outline-offset: 0; }
.tpg-merk img { display: block; max-width: 100%; height: auto; }

/* Het logo van het merk rechts in de kop van een blok. */
.tpg-sectiekop img.tpg-merklogo { flex: none; width: auto; height: 42px; margin-left: auto; padding: 0; background: none; border: 0; border-radius: 0; }

/* De kiezer: aanvinken, kleurstalen, en per merk de rijen die passen. */
.tpg-kiezer fieldset[data-soort="meer"] .tpg-optie span { position: relative; padding-left: 44px; }
.tpg-kiezer fieldset[data-soort="meer"] .tpg-optie span::before { content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; background: #fff; border: 1.5px solid var(--tpt-lijn-hard); border-radius: 4px; }
.tpg-kiezer fieldset[data-soort="meer"] .tpg-optie input:checked + span::before { background: var(--tpt-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--tpt-ink); }
.tpg-opties.smal { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.tpg-optie.staal span { display: flex; gap: 9px; align-items: center; padding: 9px 11px; }
.tpg-optie.staal b { font-size: 13.5px; font-weight: 600; }
.tpg-opties.smal .tpg-optie:not(.staal) span { display: flex; align-items: center; padding: 9px 11px; }
.tpg-opties.smal .tpg-optie:not(.staal) b { font-size: 13.5px; font-weight: 600; }
.tpg-optie.staal i, .tpg-stalen i { display: block; flex: none; width: 20px; height: 20px; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%), var(--tpg-kleur, #ccc); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; }
.tpg-stalen { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 9px; }
.tpg-stalen i { width: 14px; height: 14px; }
.tpg-uitkomst > p { margin: 0; }
.tpg-kiesgroepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.tpg-kiesgroep { display: flex; flex-direction: column; border: 1px solid var(--tpt-lijn); border-radius: 6px; overflow: hidden; }
.tpg-kieskop { display: flex; align-items: center; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--tpt-lijn); }
.tpg-kieskop img { display: block; width: auto; height: 42px; }
.tpg-merknaam { font-size: 18px; }
.tpg-kiesgroep > ul { margin: 0 0 -1px; padding: 0; list-style: none; }
.tpg-kiesrij { border-bottom: 1px solid var(--tpt-pap); }
.tpg-kiesrij[hidden], .tpg-kiesleeg[hidden] { display: none; }
.tpg-kiesrij a { display: block; padding: 13px 16px 14px; text-decoration: none; }
.tp-thema .tpg .tpg-kiesrij a { color: var(--tpt-ink); }
.tpg-kiesrij a:hover { background: var(--tpt-pap); }
.tpg-kiesrij b { display: block; margin-bottom: 4px; font-size: 15.5px; }
.tpg-kiesrij ul { margin: 0 0 8px; padding: 0; list-style: none; }
.tpg-kiesrij ul li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--tpt-ink-zacht); }
.tpg-kiesrij ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: var(--tpt-ink); border-radius: 50%; }
.tpg-kiesrij .tpg-verder { font: 600 13px var(--tpt-schrift); color: var(--tpt-rood-diep); }
.tpg-kiesleeg { margin: 0; padding: 16px; font-size: 13.5px; color: var(--tpt-ink-flauw); }
.tpg-ja { display: inline-block; width: 10px; height: 10px; background: var(--tpt-ink); border-radius: 50%; }

/* Een anker binnen een sectie: een tussenkop of een kaart waar een cel van de informatielaag
   naar wijst (`/over-selsiuz/#prijs`, `/over-quooker/#classic-fusion`). Net als een sectie
   valt hij niet onder de vaste kop van de site. */
.tpg-tussenkop[id], .tpg-kaarten > li[id], .tpg-vraag[id] { scroll-margin-top: 140px; }

@media (max-width: 1100px) {
  .tpg-brug.merken .tpg-merken { grid-template-columns: repeat(4, minmax(0, 148px)); }
}

@media (max-width: 760px) {
  .tpg-merken, .tpg-brug.merken .tpg-merken { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tpg-sectiekop img.tpg-merklogo { height: 32px; }
  .tpg-kiesgroepen { grid-template-columns: minmax(0, 1fr); }
  .tpg-opties.smal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpg-optie.staal span, .tpg-opties.smal .tpg-optie:not(.staal) span { min-height: 44px; }
}