/* Dienstpagina's (websites, later apps / 3d-printen) — bouwt voort op pagina.css */
.wrap-wide{ max-width:1260px; }
header nav{ display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); }
header nav a:not(.btn){ text-decoration:none; color:var(--text-dim); font-size:0.95rem; }
header nav a:not(.btn):hover, header nav a[aria-current]{ color:var(--text); }
@media (max-width:560px){ header nav a:not(.btn){ display:none; } }

.breadcrumb{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--text-faint); margin:0 0 1.5rem; }
.breadcrumb a{ color:var(--text-faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }

.d-hero h1{ font-size:clamp(2.1rem,6.2vw,4rem); max-width:16ch; }
.d-hero .lead{ max-width:58ch; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text-dim); }
.d-actions{ display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:2rem; }

.d-section{ margin-top:clamp(4rem,9vw,6.5rem); }
.d-section > h2{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.15; margin:0 0 0.75rem; max-width:24ch; }
.d-section > .intro{ max-width:62ch; margin-bottom:2rem; }

.d-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:901px){ .d-grid-2{ grid-template-columns:repeat(2,1fr); max-width:860px; } }
@media (max-width:900px){ .d-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .d-grid{ grid-template-columns:1fr; } }
.d-grid > div{ background:var(--bg); padding:1.6rem 1.5rem; }
.d-grid h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 0.6rem; }
.d-grid p{ margin:0; font-size:0.95rem; }

.steps{ list-style:none; padding:0; margin:0; counter-reset:stap; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.steps li{ counter-increment:stap; border-top:1px solid var(--line-strong); padding-top:1.1rem; margin:0; }
.steps li::before{ content:"0" counter(stap); display:block; font-family:var(--font-mono); font-size:0.78rem; color:var(--accent); margin-bottom:0.6rem; letter-spacing:0.1em; }
.steps h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 0.5rem; color:var(--text); }
.steps p{ margin:0; font-size:0.95rem; }

.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
.case{ display:block; text-decoration:none; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s; }
.case:hover{ border-color:var(--accent); }
.case img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:0 0; }
.case img.c-logo{ object-fit:contain; object-position:center; background:#fff; }
.case .c-body{ padding:1.1rem 1.25rem 1.3rem; }
.case .c-type{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:0.4rem; }
.case h3{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 0.4rem; }
.case p{ font-size:0.92rem; margin:0; }

.faq details{ border-top:1px solid var(--line); padding:1.1rem 0; }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; font-weight:700; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); color:var(--accent); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0.75rem 0 0; max-width:68ch; }

.places{ display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; padding:0; }
.places li{ font-family:var(--font-mono); font-size:0.78rem; border:1px solid var(--line-strong); border-radius:3px; padding:0.35em 0.8em; margin:0; color:var(--text-dim); }

.d-cta{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:clamp(1.75rem,4vw,3rem); }
.d-cta h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 0.75rem; max-width:22ch; }
.d-cta p{ max-width:56ch; }

footer a{ color:var(--text-faint); }