/* Gratis tools (/tools). Bouwt voort op check.css (tokens, knoppen, secties, FAQ, CTA). */

/* Hero met snelstart: één veld, twee checks */
.t-hero h1{max-width:14ch}
.snelstart{margin-top:34px;max-width:680px;display:grid;gap:10px}
.snelstart label{font:500 .78rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.snelstart .rij{display:flex;flex-wrap:wrap;gap:10px}
.snelstart input{flex:1 1 260px;min-width:0;font:500 1.15rem/1 var(--f-body);color:#17160F;background:#fff;border:2px solid #fff;border-radius:3px;padding:.95em 1em}
.snelstart input:focus{outline:none;border-color:var(--marker);box-shadow:0 0 0 4px rgba(251,255,74,.35)}
.snelstart .knoppen{display:flex;flex-wrap:wrap;gap:10px}
.snelstart .btn{padding:1em 1.2em;font-size:1rem}
@media (max-width:520px){.snelstart .knoppen .btn{flex:1 1 100%}}

/* Kistje rechts in de hero: wat erin zit, in getallen */
.kist{background:var(--night-2);border:1px solid var(--night-line);border-radius:6px;padding:22px;color:#F1EFE4;display:grid;gap:0;position:relative;z-index:1;box-shadow:0 24px 60px rgba(0,0,0,.35);transform:rotate(-1deg)}
.kist .tag{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted);margin-bottom:10px}
.kist .r{display:grid;grid-template-columns:5.2ch minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--night-line)}
.kist .r b{font:400 2.4rem/1 var(--f-title);color:var(--marker);font-variant-numeric:tabular-nums}
.kist .r span{color:var(--night-text);font-size:.98rem}

/* Vraag-gestuurde tegels */
.tegels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tegel{grid-column:span 2;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:22px 22px 20px;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .2s,background .2s,transform .2s}
.tegel.groot{grid-column:span 3}
.tegel:hover{border-color:var(--ink);background:var(--surface)}
.tegel:hover .pijl{transform:translateX(4px)}
.tegel .proef{justify-self:start;font:400 1.15rem/1 var(--f-title);letter-spacing:.02em;padding:.45em .6em .4em;border-radius:3px;background:var(--night);color:var(--marker);font-variant-numeric:tabular-nums}
.tegel .proef.licht{background:var(--marker);color:var(--on-marker)}
.tegel .vraag{font:400 clamp(1.45rem,2.4vw,1.9rem)/1.02 var(--f-title);letter-spacing:.01em;text-wrap:balance}
.tegel.groot .vraag{font-size:clamp(1.7rem,3vw,2.4rem)}
.tegel .krijg{color:var(--muted);font-size:.97rem}
.tegel .voet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.tegel .naam{font:700 1.1rem/1.1 var(--f-display);font-stretch:85%}
.tegel .meta{display:block;font:500 .74rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.tegel .pijl{font-size:1.4rem;transition:transform .2s;flex:none}
.tegel.hl{border-color:var(--marker);background:color-mix(in srgb,var(--marker) 10%,var(--paper))}
.tegel.hl::after{content:"";position:absolute;right:-14px;top:-2px;width:64px;aspect-ratio:310/269;background:var(--tri-geel) no-repeat top/100% 100%;transform:rotate(180deg);opacity:.9;pointer-events:none}
@media (max-width:980px){.tegels{grid-template-columns:repeat(2,minmax(0,1fr))}.tegel,.tegel.groot{grid-column:span 1}}
@media (max-width:620px){.tegels{grid-template-columns:1fr}}

/* Belofte: drie afspraken */
.beloftes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.belofte{padding:24px 26px 26px 0;display:grid;gap:10px;align-content:start}
.belofte+.belofte{padding-left:26px;border-left:1px solid var(--line)}
.belofte p{color:var(--muted);font-size:.98rem}
@media (max-width:860px){.beloftes{grid-template-columns:1fr}.belofte,.belofte+.belofte{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* In de maak */
.maak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:720px){.maak{grid-template-columns:1fr}}

/* Brede tegel onderaan: liggend op desktop, gewoon op smaller scherm */
.tegel.breed{grid-column:1/-1;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:12px 28px}
.tegel.breed .voet{border-top:0;padding-top:0;gap:22px}
@media (max-width:980px){.tegel.breed{grid-column:span 1;grid-template-columns:none;grid-template-rows:auto auto 1fr auto;align-items:stretch}.tegel.breed .voet{border-top:1px solid var(--line);padding-top:12px}}
.ac{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-stretch:85%}