/* =====================================================================
   voet.css — de gedeelde sitevoet van klyo.nl (herontwerp 23 aug 2026).

   Was: zeven stapels naast elkaar (merk, navigatie, diensten, tools,
   contact, werkgebied, juridisch) — Steven: "te druk". Nu: merk mét
   direct contact, drie korte lijsten, en al het administratieve
   (juridisch, KvK/BTW, de SEO-stadslinks) in twee dunne metaregels.
   De oude .footer-*-regels in de pagina's zijn dood; alleen deze
   vt-*-klassen en het footer-element zelf tellen nog.
   ===================================================================== */
.vt-boven { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; border-bottom: 1px solid var(--line, rgba(26,26,24,0.1)); margin-bottom: 22px; }
.vt-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-family: var(--serif, Georgia, serif); font-size: 26px; }
.vt-zin { color: var(--fg-dim, rgba(26,26,24,0.66)); font-size: 14px; line-height: 1.65; max-width: 300px; margin: 14px 0 18px; }
.vt-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 20px; }
.vt-contact a { color: var(--fg, #1A1A18); text-decoration: none; font-size: 14px; padding: 3px 0; }
.vt-contact a:hover { text-decoration: underline; }
.vt-socials { display: flex; gap: 10px; }
.vt-socials a { width: 36px; height: 36px; border: 1px solid var(--line-strong, rgba(26,26,24,0.18)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg, #1A1A18); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.vt-socials a:hover { background: var(--fg, #1A1A18); border-color: var(--fg, #1A1A18); color: var(--bg, #F2EEE4); }
.vt-socials svg { width: 15px; height: 15px; }
.vt-kolom h3 { font-family: var(--mono, monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-dim, rgba(26,26,24,0.66)); font-weight: 500; margin: 6px 0 14px; }
.vt-kolom ul { list-style: none; margin: 0; padding: 0; }
/* Eén lijst per kolom — de eerdere twee-stromen-splitsing van Diensten
   las als een layoutfout. Alle negen links blijven (SEO-werk). */
.vt-kolom li { break-inside: avoid; }
/* nowrap: labels als "AI-Vindbaarheidstest" braken halverwege af en
   dat maakte de oude voet rommelig. */
.vt-kolom a { display: inline-block; color: var(--fg-dim, rgba(26,26,24,0.66)); text-decoration: none; font-size: 14px; padding: 5px 0; white-space: nowrap; }
.vt-kolom a:hover { color: var(--fg, #1A1A18); }
.vt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 28px; flex-wrap: wrap; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.03em; color: var(--fg-faint, rgba(26,26,24,0.55)); }
.vt-meta + .vt-meta { margin-top: 8px; }
.vt-meta a { color: inherit; text-decoration: none; }
.vt-meta a:hover { color: var(--fg, #1A1A18); text-decoration: underline; }
@media (max-width: 960px) {
  .vt-boven { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vt-boven { grid-template-columns: 1fr; gap: 30px; padding-bottom: 36px; }
  .vt-meta { flex-direction: column; align-items: flex-start; gap: 5px; }
}