/* ==========================================================================
   TOOLIFY – TOOL-PAGINA (sinds V2.2.0): kruimelpad, titelbalk, gerelateerde tools.
   De opmaak van de tool zelf staat (nog) in apps/<slug>/style.css.
   ========================================================================== */
.toolpagina main.tp { padding: 0; max-width: none; overflow: visible; }

/* kruimelpad */
.kruimel, .kruimel.wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 28px; font-size: var(--fs-s); color: var(--tekst-3); }
.kruimel a { color: var(--tekst-2); text-decoration: none; }
.kruimel a:hover { color: var(--tekst); text-decoration: underline; }
.kruimel [aria-current] { color: var(--tekst); font-weight: 500; }

/* titelbalk */
.tp-kop, .tp-kop.wrap { display: flex; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 24px; }
.tp-kop .tegel { width: 56px; height: 56px; border-radius: 16px; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); }
.tp-kop .tegel svg.i { width: 26px; height: 26px; }
.tp-kop-tekst { flex: 1; min-width: 0; }
.tp-kop h1 { font-size: 2rem; font-weight: 700; margin: 0; letter-spacing: -.02em; line-height: 1.2; }
.tp-kop p { margin: 4px 0 0; color: var(--tekst-2); }
.tp-fav { flex: none; }
.tp-fav.aan { border-color: color-mix(in srgb, var(--let-op) 60%, var(--rand)); }
.tp-fav.aan svg.i { color: var(--let-op); fill: currentColor; }

/* de tool: eigen titel en intro verbergen (de titelbalk hierboven vervangt ze) */
.tool-inhoud h1,
.tool-inhoud h1 + p { display: none !important; }
.tool-inhoud > :first-child { margin-top: 0; }

/* gerelateerde tools */
.tp-verwant, .tp-verwant.wrap { padding-top: 48px; padding-bottom: 8px; }

@media (max-width: 760px) {
  .kruimel, .kruimel.wrap { padding-top: 18px; }
  .tp-kop, .tp-kop.wrap { flex-wrap: wrap; gap: 12px; }
  .tp-kop .tegel { width: 48px; height: 48px; }
  .tp-kop h1 { font-size: 1.6rem; }
  .tp-fav { width: 100%; }
}