/* kleine hulpklassen, in plaats van style-attributen in de html */ .mt-10 { margin-top:10px; } .main-top { padding-top: clamp(96px, 12vh, 130px); } .rel { position: relative; } /* ---- uit ---- */ /* pagina-eigen stijlen: privacy en algemene voorwaarden */ .pv-kop { margin-top: 8px; } .pv-datum { margin-top: 18px; } .pv-tekst { margin-top: clamp(28px, 4vh, 44px); } /* het eerste blok sluit op de datumregel aan, of dat nu een kop is (privacy) of een alinea met de bedrijfsgegevens (algemene voorwaarden) */ .pv-tekst > :first-child { margin-top: 0; } .pv-tekst ul { padding-left: 20px; } .pv-tekst li + li { margin-top: 6px; } .pv-slot { margin-top: clamp(34px, 5vh, 52px); padding-top: clamp(22px, 3vh, 32px); border-top: 1px solid rgba(var(--ink-rgb), 0.14); } /* ---- cookietabel: op een telefoon schuift hij opzij in zijn eigen kader ---- */ .pv-tabel { margin-top: 1em; overflow-x: auto; border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: var(--radius-s); -webkit-overflow-scrolling: touch; } .pv-tabel table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; letter-spacing: -0.01em; } .pv-tabel th, .pv-tabel td { padding: 11px 14px; text-align: left; vertical-align: top; border-top: 1px solid rgba(var(--ink-rgb), 0.12); color: rgba(var(--ink-rgb), 0.72); } .pv-tabel thead th { border-top: 0; font-weight: 600; color: var(--ink); background: rgba(var(--ink-rgb), 0.04); white-space: nowrap; } /* Bewust de mono van het systeem en niet var(--font-mono): JetBrains Mono maakt de regel 2px hoger en laat de cookietabel anders lopen. */ .pv-tabel td code { font-family: ui-monospace, monospace; font-size: 0.92em; color: var(--ink); } /* de namen niet middenin afbreken; de kolom mag er breed genoeg voor zijn */ .pv-tabel td:first-child { white-space: nowrap; } .pv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* op een telefoon wordt elke rij een kaartje met de kolomnaam uit data-kolom */ @media (max-width: 620px) { .pv-tabel { overflow: visible; border: 0; border-radius: 0; } .pv-tabel table { min-width: 0; } .pv-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pv-tabel tr { display: block; margin-top: 12px; padding: 4px 16px 12px; border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: var(--radius-s); } .pv-tabel tr:first-child { margin-top: 0; } /* Label bóven de waarde: een grid maakt van elk stukje tekst een eigen kolomvak. */ .pv-tabel td:first-child { white-space: normal; } .pv-tabel td code { overflow-wrap: anywhere; } .pv-tabel td { display: block; padding: 9px 0; border-top: 1px solid rgba(var(--ink-rgb), 0.1); } .pv-tabel tr td:first-child { border-top: 0; } .pv-tabel td::before { display: block; margin-bottom: 2px; content: attr(data-kolom); font-size: var(--fs-caption); font-weight: 600; color: var(--ink); } }