/* Bosch Management — website-brandkit (zelfde taal als de app: ink, brass, parchment, Lora + Outfit) */
:root{--ink:#142433;--slate:#243446;--brass:#A18553;--parch:#F0E9DA;--bone:#FAF7F0;
--moss:#5F7355;--ochre:#C0903D;--claret:#8A3B35;--mist:#DDE3E9;--ink60:#5A6B7C;--card:#FFFFFF;--soft:#F4EFE3}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font:16px/1.6 Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Lora,Georgia,serif;font-weight:500}
a{color:inherit;text-decoration:none}
img,svg{display:block}

/* — navigatie — */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px;
padding:16px 5vw;transition:background .3s ease,box-shadow .3s ease}
header.vast{background:rgba(250,247,240,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--mist)}
header .logo{display:flex;align-items:center;gap:10px}
header .logo b{font-family:Lora;letter-spacing:2.5px;font-size:14px;font-weight:600}
header .logo small{display:block;color:var(--brass);letter-spacing:2.5px;font-size:7.5px;font-weight:700}
header nav{margin-left:auto;display:flex;gap:24px;align-items:center}
header nav a{font-size:13.5px;color:var(--ink60);letter-spacing:.3px}
header nav a:hover{color:var(--ink)}
header nav a.knop{color:#fff}
header.donker:not(.vast) nav a{color:#C9C2B2}
header.donker:not(.vast) nav a:hover{color:var(--parch)}
header.donker:not(.vast) .logo b{color:var(--parch)}

/* — bouwstenen — */
.knop{display:inline-block;font:600 14px Outfit;border:0;border-radius:22px;padding:12px 26px;cursor:pointer;
background:var(--brass);color:#fff;transition:all .18s ease;letter-spacing:.3px}
.knop:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(161,133,83,.35)}
.knop.ghost{background:transparent;color:var(--parch);border:1px solid rgba(161,133,83,.55)}
.knop.ghost:hover{border-color:var(--brass);box-shadow:none;background:rgba(161,133,83,.12)}
.knop.licht{background:var(--soft);color:var(--ink)}
.eyebrow{color:var(--brass);font-size:11.5px;letter-spacing:3px;font-weight:700;text-transform:uppercase}
.kaart{background:var(--card);border:1px solid var(--mist);border-radius:14px;padding:26px 28px}
.muted{color:var(--ink60)}
input{font:15px Outfit;border:1px solid var(--mist);border-radius:10px;padding:12px 14px;background:#fff;color:var(--ink);width:100%}
input:focus{outline:none;border-color:var(--brass)}
.veldfout{color:var(--claret);font-size:13px;min-height:18px;margin-top:8px}

/* — secties — */
section{padding:96px 5vw}
.smal{max-width:880px;margin:0 auto}
.breed{max-width:1180px;margin:0 auto}
.donkerblok{background:var(--ink);color:var(--parch)}
.donkerblok .muted{color:#C9C2B2}
.donkerblok .kaart{background:var(--slate);border-color:rgba(161,133,83,.25);color:var(--parch)}

/* — scroll-reveal — */
.rij-op{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rij-op.zichtbaar{opacity:1;transform:none}
.vertraag-1{transition-delay:.08s}.vertraag-2{transition-delay:.16s}.vertraag-3{transition-delay:.24s}
.vertraag-4{transition-delay:.32s}.vertraag-5{transition-delay:.4s}

/* — voettekst — */
footer{padding:48px 5vw;border-top:1px solid var(--mist);display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer .muted{font-size:12.5px}
footer nav{margin-left:auto;display:flex;gap:20px}
footer nav a{font-size:12.5px;color:var(--ink60)}
footer nav a:hover{color:var(--ink)}

@media(max-width:720px){
  section{padding:64px 6vw}
  header{gap:14px}
  header nav{gap:14px}
  header nav a:not(.knop){display:none}
}