/* Caseverhalen: uitdaging, dagelijkse stappen en verdieping. */
.case-hero { padding:36px 0 64px; background:var(--diep); }
.case-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:52px; margin-top:32px; }
.case-hero h1 { font-size:clamp(36px,4vw,60px); line-height:1.12; letter-spacing:-.02em; word-spacing:.04em; margin:18px 0 24px; }
.case-hero h1 em { color:var(--accent); font-style:normal; }
.case-hero-grid>img { width:100%; height:auto; }
.case-eyebrow { font:600 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gloed); margin:0 0 16px; }
.case-hero .case-eyebrow { color:var(--accent-2); }
.case-intro { color:var(--op-donker-zacht); font-size:18px; max-width:550px; }
.case-tags { list-style:none; padding:0; display:flex; gap:10px; flex-wrap:wrap; margin:24px 0; }
.case-tags li { border:1px solid var(--lijn-donker); border-radius:5px; padding:7px 10px; color:var(--accent-2); font-size:12px; }
.case-practice { padding:64px 0; background:var(--zand,#f6f1e6); }
.case-compare { display:grid; grid-template-columns:1fr 1fr; gap:64px; border-bottom:1px solid var(--lijn); padding-bottom:42px; margin-bottom:48px; }
.case-compare h2 { font-size:clamp(24px,2.5vw,32px); margin:0 0 16px; }
.case-compare p:not(.case-eyebrow),.case-story-heading>p:last-child,.case-reason p { color:var(--zacht); }
.case-after { border-left:3px solid var(--gloed); padding-left:32px; }
.case-story-heading h2 { font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em; margin:0 0 14px; }
.case-story-grid { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:64px; margin-top:32px; }
.case-steps { display:flex; flex-direction:column; gap:14px; }
.case-step { display:grid; grid-template-columns:34px 1fr; gap:18px; width:100%; padding:24px; text-align:left; font:inherit; color:var(--inkt); background:transparent; border:1px solid var(--lijn); border-radius:10px; cursor:pointer; }
.case-step[aria-pressed=true] { background:#e6eee6; border-color:var(--gloed); }
.case-step-number { font:600 13px/1.8 var(--mono); color:var(--gloed); }
.case-step strong { display:block; font-size:20px; margin-bottom:8px; }
.case-step strong+span { display:block; color:var(--zacht); font-size:15px; line-height:1.65; }
.case-screen-stage { margin:0; padding:28px 20px 20px; text-align:center; background:#e0e8df; border-radius:14px; }
.case-screen { display:block; width:190px; max-width:100%; height:auto; margin:0 auto 20px; border:7px solid var(--diep); border-radius:28px; box-shadow:0 15px 28px #08242722; }
.case-screen-stage figcaption { font-size:12px; color:var(--zacht); }
.case-reason { margin-top:40px; padding-top:28px; border-top:1px solid var(--lijn); }
.case-reason h3 { font-size:20px; margin:0 0 12px; }
.case-reason p { max-width:850px; margin:0; }
#functies:has(.case-all) { padding:0; }
.case-all>summary { max-width:var(--breed,1180px); margin:auto; padding:30px 24px; font-size:20px; font-weight:650; cursor:pointer; }
.case-all>summary span { display:inline-block; margin-left:20px; color:var(--zacht); font-size:13px; font-weight:400; }
.case-all[open]>.container { padding-block:30px 60px; }
@media(max-width:760px) {
 .case-hero { padding:26px 0 40px; }
 .case-hero-grid { grid-template-columns:1fr; gap:24px; }
 .case-hero-grid>img { max-width:500px; margin:auto; }
 .case-practice { padding:40px 0; }
 .case-compare,.case-story-grid { grid-template-columns:1fr; gap:28px; }
 .case-after { padding-left:22px; }
 .case-step { padding:20px 16px; gap:12px; }
 .case-all>summary span { display:block; margin:8px 0 0; }
}