/* linkcards.css (23 okt 2026): kleurige cartoon-kaarten voor /useful-links/ (tools/extra_src.py). Alleen deze pagina laadt dit bestand; privacy/contact houden links.css.
   Per categorie: --cc (accent) en --cs (zacht) via style op de sectie. Iconen = inline SVG-sprite, decor = eigen tekeningen uit /assets/art. Beweging via motion.css (m-lift/m-pop). */
.l-sprite{position:absolute;width:0;height:0;overflow:hidden}
.l-chip{display:inline-flex;align-items:center;gap:6px;background:var(--cc);box-shadow:3px 3px 0 var(--ink);padding:3px 14px 3px 6px}
.l-chip .l-ci{width:26px;height:26px;flex:none;background:#fff;border:2px solid var(--ink);border-radius:50%;padding:2px}
.l-chip b{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 7px;font-size:.8rem;opacity:1!important}
.l-chip:focus-visible,.l-item:focus-within{outline:4px solid var(--focus);outline-offset:3px}
.l-cat{overflow-x:clip}.l-cat .c-wrap{position:relative}
.l-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 8px;padding-right:110px}
.l-head h2{margin:0}
.l-sticker{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--cc);border:4px solid var(--ink);box-shadow:4px 5px 0 var(--shadow);transform:rotate(-6deg)}
.l-sticker .l-i{width:44px;height:44px}
.l-cnt{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:0 12px;font-weight:700;font-size:1.05rem;transform:rotate(3deg)}
.l-art{position:absolute;right:20px;top:-14px;width:110px;height:auto;transform:rotate(6deg);pointer-events:none}
.l-cat .c-intro{background:var(--cs);border:3px solid var(--ink);border-radius:18px;padding:10px 16px;box-shadow:4px 5px 0 var(--shadow);display:inline-block}
.l-list{gap:22px;margin-top:20px}
.l-item{position:relative;padding:0 0 14px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:6px 8px 0 var(--shadow)}
.l-item>*:not(.l-band){margin-left:18px;margin-right:18px}
.l-band{display:flex;align-items:center;height:62px;margin:0 0 12px;padding:0 14px;background:var(--cc);background-image:radial-gradient(rgba(255,255,255,.55) 3px,transparent 3.5px);background-size:18px 18px;border-bottom:4px solid var(--ink)}
.l-band .l-i{width:46px;height:46px;background:#fff;border:3px solid var(--ink);border-radius:50%;padding:3px;transform:rotate(-8deg) translateY(16px);box-shadow:3px 3px 0 var(--ink)}
.l-item h3{margin-top:16px;font-size:1.15rem}
.l-item h3 a{text-decoration-color:var(--cc);text-decoration-thickness:4px}
.l-item h3 a::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.l-item h3 a:focus{outline:none}
.l-item .l-host{display:inline-block;align-self:flex-start;background:var(--cs);border:2px solid var(--ink);border-radius:999px;padding:0 10px;opacity:1;font-size:.8rem;color:var(--ink)}
.l-b{background:#fff1c1}
.l-b.o{background:#b8f0c8}
.l-item::after{content:"Visit ↗";align-self:flex-start;margin:auto 18px 0;background:var(--cc);border:3px solid var(--ink);border-radius:999px;padding:1px 14px;font-weight:700;font-size:.9rem;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
:lang(nl) .l-item::after{content:"Bekijk ↗"}
.l-item p:last-of-type{margin-bottom:14px}
@media (hover:hover){.l-item:hover{box-shadow:8px 11px 0 var(--shadow)}.l-item:hover h3 a{text-decoration-color:var(--ink)}}
@media (max-width:640px){.l-art{width:72px;right:10px;top:-6px}.l-head{padding-right:70px;gap:10px}.l-sticker{width:54px;height:54px}.l-sticker .l-i{width:34px;height:34px}.l-list{gap:18px}}
@media (max-width:900px){.t-links .c-dec.cld1{display:none}}   /* 23 okt 17:06: wolk overlapte de kruimelpad-tekst op smalle schermen */
@media print{.l-art,.l-band,.l-item::after{display:none}.l-item{transform:none}}