/* ============================================================
   PAGE-CLAIMEN.CSS — "Bedrijfsgegevens beheren" (Linnen gids)
   Pagina-specifieke layout bovenop sandbox-base.css. Verbruikt
   uitsluitend variabelen uit tokens.css. Prefix .cl-.
   ============================================================ */

.cl-head{padding:40px 0 6px;}
.cl-head .sb-breadcrumb{margin-bottom:18px;}
.cl-head h1{margin:12px 0 0;}
.cl-head .sb-lead{max-width:620px;margin:16px 0 0;}

.cl-section{padding:38px 0 80px;}
.cl-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-6);align-items:start;}
@media (max-width:900px){.cl-grid{grid-template-columns:1fr;}}

/* Zijkolom — waarom claimen */
.cl-aside{position:sticky;top:96px;}
.cl-benefit{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--color-line);}
.cl-benefit:last-child{border-bottom:none;}
.cl-benefit .ic{width:44px;height:44px;border-radius:11px;flex:0 0 auto;background:#eef5f0;color:var(--color-primary);display:grid;place-items:center;}
.cl-benefit .t{font-weight:600;font-size:1.05rem;}
.cl-benefit .d{color:var(--color-text-muted);font-size:0.96rem;}
.cl-verify{margin-top:24px;background:var(--color-surface-deep);border:1px solid var(--color-line);border-radius:12px;padding:22px 24px;}
.cl-verify h2{font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.cl-verify h2 svg{color:var(--color-primary);flex:0 0 auto;}
.cl-verify p{font-size:0.96rem;color:var(--color-text-muted);}

/* Formulierkaart */
.cl-form{padding:34px 36px;}
.cl-listing{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#eef5f0;border:1px solid #bcd3c4;border-radius:11px;margin-bottom:26px;}
.cl-listing .av{width:48px;height:48px;border-radius:var(--radius);flex:0 0 auto;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem;font-weight:600;}
.cl-listing .nm{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.1;}
.cl-listing .loc{color:var(--color-text-muted);font-size:0.95rem;}
.cl-form>p.intro{color:var(--color-text-muted);margin-bottom:24px;}

.cl-fieldset{border:none;margin-bottom:26px;}
.cl-fieldset legend{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px;padding-top:20px;border-top:1px solid var(--color-line);width:100%;}
.cl-fieldset:first-of-type legend{border-top:none;padding-top:0;}
.cl-step-no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--color-accent-soft);color:#5a4715;font-size:0.78rem;margin-right:8px;vertical-align:-3px;}

/* Groep-legends binnen een veld (relatie + faciliteiten): zelfde
   uiterlijk als een gewoon .sb-field>label, niet als stap-legend. */
.cl-fieldset .sb-field{border:none;padding:0;}
.cl-fieldset .sb-field>legend{display:block;float:left;width:100%;padding:0;font-weight:600;font-size:1rem;letter-spacing:normal;text-transform:none;color:var(--color-text);margin-bottom:8px;border-top:none;}
.cl-fieldset .sb-field>legend + *{clear:both;}

.cl-agree{margin-top:8px;}
.cl-submit{margin-top:14px;}
.cl-note{margin-top:14px;font-size:0.88rem;color:var(--color-text-muted);}

.cl-honeypot{position:absolute;left:-9999px;}
.cl-optional{color:var(--color-text-muted);font-weight:500;}

/* ---- Productie-aanvulling: statusmelding ---- */
.cl-alert{margin-bottom:20px;padding:14px 18px;border-radius:var(--radius);font-size:0.98rem;border:1px solid var(--color-line);}
.cl-alert--success{background:#eef5f0;border-color:#bcd3c4;color:var(--color-primary);}
.cl-alert--error{background:#f9ece9;border-color:#dcb4ac;color:var(--color-danger);}