/* de With tuinaanleg & onderhoud: eigen branche-onderdelen (tuinplanner en het tuinjaar) */
.tp-kaart{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;
  background:var(--wit);border-radius:var(--r-kaart);box-shadow:0 24px 50px -24px rgba(var(--ink-rgb),.35);padding:clamp(16px,2.4vw,28px);max-width:1120px;margin-inline:auto}
.tp-veld{position:relative;border-radius:14px;overflow:hidden;background:#e9e6df}
.tp-veld svg{display:block;width:100%;height:auto}
.tp-laag{opacity:0;transform:scale(.97);transform-origin:center;transform-box:fill-box;transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.tp-laag.aan{opacity:1;transform:none}
.tp-label{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.tp-info{text-align:center}
.tp-knoppen{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.tp-knop{border:1px solid rgba(var(--ink-rgb),.25);background:var(--wit);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.tp-knop:hover{border-color:var(--ink)}
.tp-knop.actief{background:var(--ink);color:#fff;border-color:var(--ink)}
.tp-knop.actief::before{content:"\2713";color:#7ed39c;margin-right:6px;font-weight:700}
.tp-info h3{font-size:22px;margin-bottom:8px}
.tp-info p{color:var(--tekst);margin:0 auto 20px;max-width:420px}
.tj{max-width:980px;margin-inline:auto}
.tj-knoppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.tj-knop{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid rgba(var(--ink-rgb),.18);background:var(--wit);color:var(--ink);border-radius:16px;padding:14px 8px;font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease)}
.tj-knop small{font-size:12.5px;font-weight:400;opacity:.75}
.tj-knop.actief{background:var(--ink);color:#fff;border-color:var(--ink)}
.tj-paneel{display:none;background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:clamp(22px,3vw,36px);text-align:center}
.tj-paneel.actief{display:block;animation:tjIn .6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes tjIn{from{opacity:0}to{opacity:1}}
.tj-paneel h3{font-size:24px;margin-bottom:8px}
.tj-paneel p{color:var(--tekst);max-width:640px;margin:0 auto 18px}
.tj-paneel ul{width:fit-content;margin-inline:auto;text-align:left;list-style:none;padding:0;display:grid;gap:10px}
.tj-paneel li{display:flex;align-items:flex-start;gap:10px}
.tj-paneel li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#2e9e5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.no-js .tp-laag{opacity:1;transform:none}
.no-js .tj-paneel{display:block;margin-bottom:12px}
@media(max-width:900px){.tp-kaart{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.tj-knoppen{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-knop{font-size:13px;padding:7px 12px}}
@media(prefers-reduced-motion:reduce){.tp-laag{transition:none}.tj-paneel.actief{animation:none}}
/* subhero's met echt beeld van de klant onder een egale waas */
.dienst-met-form>.product-hero{background:linear-gradient(rgba(var(--ink-rgb),.74),rgba(var(--ink-rgb),.58)),url('../img/hero-1.webp') center/cover no-repeat}
.pagina-hero{background:linear-gradient(rgba(var(--ink-rgb),.70),rgba(var(--ink-rgb),.55)),url('../img/hero-2.webp') center/cover no-repeat!important}
.pagina-hero::before,.pagina-hero::after{display:none}
.tp-veld .tp-label{position:static;display:block;max-width:none;border-radius:0;box-shadow:none;background:var(--tint);text-align:center;padding:10px 14px}