:root{
  --navy:#003a8f;
  --teal:#0071ce;
  --teal-d:#005aa6;
  --deal:#e63946;
  --inkt:#12233b;
  --grijs:#5b6b7d;
  --lijn:#dce6f2;
  --vlak:#eef4fb;
  --wit:#ffffff;
  --radius:14px;
  --schaduw:0 6px 20px rgba(0,58,143,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--inkt);background:var(--vlak);line-height:1.5;
}
a{color:inherit;text-decoration:none}
.kern{max-width:1180px;margin:0 auto;padding:0 20px}
svg{width:100%;height:100%;display:block}

/* Topbalk */
.topbalk{background:var(--navy);color:#cfe0ea;font-size:.82rem}
.topbalk-in{display:flex;gap:26px;justify-content:center;padding:8px 20px;flex-wrap:wrap}

/* Header */
.header{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:30}
.header-in{display:flex;align-items:center;gap:24px;padding:16px 20px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:38px;height:38px;color:var(--wit);background:var(--teal);border-radius:11px;padding:8px;box-shadow:var(--schaduw)}
.logo-tekst{font-size:1.4rem;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.logo-tekst strong{color:var(--teal);font-weight:800}
.zoek{flex:1;display:flex;max-width:620px;border:2px solid var(--teal);border-radius:12px;overflow:hidden}
.zoek input{flex:1;border:0;padding:12px 16px;font-size:.95rem;outline:none}
.zoek button{border:0;background:var(--teal);color:#fff;width:52px;cursor:pointer;padding:12px}
.zoek button svg{width:20px;height:20px;margin:0 auto}
.header-acties{display:flex;gap:18px;margin-left:auto}
.hactie{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.9rem;font-weight:600;position:relative}
.hactie svg{width:24px;height:24px}
.hactie .teller{position:absolute;top:-8px;left:16px;background:var(--deal);color:#fff;font-size:.7rem;font-style:normal;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* Categoriebalk */
.catbalk{background:var(--wit);border-bottom:1px solid var(--lijn)}
.catbalk-in{display:flex;gap:6px;overflow-x:auto;padding:6px 20px}
.catlink{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--grijs);white-space:nowrap}
.catlink svg{width:20px;height:20px;color:var(--teal)}
.catlink:hover{background:var(--vlak);color:var(--navy)}

/* Hero */
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;
  background:linear-gradient(120deg,#003a8f,#0071ce);color:#fff;border-radius:var(--radius);
  padding:44px;margin:26px 0;overflow:hidden}
.hero-kop{display:inline-block;background:var(--deal);color:#fff;font-weight:700;font-size:.8rem;
  padding:5px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.hero h1{font-size:2.5rem;line-height:1.1;margin:16px 0;font-weight:800}
.hero h1 span{color:var(--teal)}
.hero p{color:#c6d4e6;max-width:440px;margin-bottom:22px}
.hero-beeld{position:relative;display:grid;place-items:center;color:rgba(255,255,255,.35);height:200px}
.hero-beeld svg{width:150px;height:150px}
.hero-badge{position:absolute;top:0;right:10px;background:var(--deal);color:#fff;font-weight:800;
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;box-shadow:var(--schaduw)}

/* Knoppen */
.knop{display:inline-block;background:var(--teal);color:#fff;font-weight:700;padding:12px 22px;
  border-radius:11px;border:0;cursor:pointer;font-size:.95rem;transition:background .15s}
.knop:hover{background:var(--teal-d)}
.knop-licht{background:#fff;color:var(--navy)}
.knop-licht:hover{background:#eef3f6}
.knop-vol{width:100%}

/* USP-strip */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}
.usp{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:16px 18px}
.usp strong{display:block;color:var(--navy)}
.usp span{font-size:.85rem;color:var(--grijs)}

/* Sectiekop */
.sectiekop{display:flex;align-items:baseline;justify-content:space-between;margin:36px 0 18px}
.sectiekop h2{font-size:1.6rem;color:var(--navy)}
.meer{color:var(--teal);font-weight:700;font-size:.9rem}

/* Productgrid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.kaart:hover{box-shadow:var(--schaduw);transform:translateY(-3px)}
.kaart-beeld{position:relative;background:var(--vlak);height:170px;display:grid;place-items:center}
.kaart-icoon{width:88px;height:88px;color:var(--teal)}
.korting{position:absolute;top:12px;left:12px;background:var(--deal);color:#fff;font-weight:800;
  font-size:.8rem;padding:4px 9px;border-radius:8px}
.vlag{position:absolute;top:12px;right:12px;background:var(--navy);color:#fff;font-weight:700;
  font-size:.72rem;padding:4px 9px;border-radius:8px}
.kaart-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.kaart-body h3{font-size:.98rem;font-weight:600;color:var(--inkt);line-height:1.35}
.prijzen{display:flex;align-items:baseline;gap:10px;margin-top:auto}
.nu{font-size:1.35rem;font-weight:800;color:var(--navy)}
.van{font-size:.9rem;color:var(--grijs);text-decoration:line-through}

/* Banners */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0}
.banner{border-radius:var(--radius);padding:34px;color:#fff;min-height:180px;display:flex;align-items:center}
.banner h3{font-size:1.5rem;margin-bottom:6px}
.banner p{margin-bottom:16px;opacity:.9}
.banner-a{background:linear-gradient(120deg,#0071ce,#005aa6)}
.banner-b{background:linear-gradient(120deg,#0a86e0,#0071ce)}

/* Footer */
.footer{background:var(--navy);color:#c6d4e6;margin-top:50px}
.footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px;padding:44px 20px}
.footer-merk .logo-tekst{color:#fff}
.footer-merk p{margin-top:12px;font-size:.9rem;max-width:280px}
.footer-kol h4{color:#fff;font-size:1rem;margin-bottom:14px}
.footer-kol a{display:block;font-size:.9rem;padding:5px 0;color:#c6d4e6}
.footer-kol a:hover{color:#fff}
.footer-onder{border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;padding:16px 0}
.footer-onder .kern{color:#9fb3c4}

/* Navigatie in header */
.hoofdnav{display:flex;gap:22px;margin-left:8px}
.hoofdnav a{font-weight:600;color:var(--navy);font-size:.95rem}
.hoofdnav a:hover{color:var(--teal)}
.knop-klein{padding:9px 16px;font-size:.88rem;margin-left:auto}
.knop-licht-rand{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.knop-licht-rand:hover{background:#eafaf8}
.knop-rand-rood{background:#fff;color:var(--deal);border:2px solid var(--deal)}
.knop-rand-rood:hover{background:#fff2f0}

/* Kaart als link */
a.kaart{color:inherit}
.kaart-beeld .vlag{background:var(--navy)}

/* Volg-blok op home */
.volgblok{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:28px 32px;margin:34px 0}
.volgblok h2{color:var(--navy);font-size:1.4rem}
.volgblok p{color:var(--grijs);margin-top:4px}

/* Kruimelpad + product */
.kruimel{color:var(--grijs);font-size:.88rem;margin:22px 0 10px}
.kruimel a{color:var(--teal);font-weight:600}
.product{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:30px;margin-bottom:40px}
.product-beeld{background:var(--vlak);border-radius:var(--radius);display:grid;place-items:center;min-height:280px}
.kaart-icoon.groot{width:150px;height:150px;color:var(--teal)}
.product-info h1{color:var(--navy);font-size:1.8rem;margin:10px 0}
.nu.groot{font-size:1.9rem}
.vlag.donker{display:inline-block;background:var(--navy);color:#fff;font-size:.72rem;
  font-weight:700;padding:4px 10px;border-radius:8px}
.product-oms{color:var(--grijs);margin:14px 0}
.koopvak{background:var(--vlak);border-radius:12px;padding:18px;margin:18px 0}
.koopvak p{margin-bottom:12px;font-size:.92rem}
.kenmerken{list-style:none;margin-top:10px}
.kenmerken li{padding:6px 0 6px 24px;position:relative;font-size:.92rem;color:var(--grijs)}
.kenmerken li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}

/* Smalle kolom (volg/bestelling) */
.kern.smal{max-width:720px}
.volgkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:32px;margin:26px 0}
.volgkaart h1{color:var(--navy);font-size:1.7rem}
.volgkaart>p{color:var(--grijs);margin:8px 0 20px}

/* Formulieren */
.veldform{display:flex;flex-direction:column;gap:14px}
.veldform label{font-weight:600;color:var(--navy);font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.veldform input,.veldform select,.veldform textarea{
  border:1px solid var(--lijn);border-radius:10px;padding:12px 14px;font-size:.95rem;
  font-family:inherit;outline:none;font-weight:400;color:var(--inkt)}
.veldform input:focus,.veldform select:focus,.veldform textarea:focus{border-color:var(--teal)}
.klein{font-size:.82rem;color:var(--grijs)}

/* Meldingen */
.melding{border-radius:10px;padding:12px 16px;margin:14px 0;font-size:.92rem}
.melding.ok{background:#e6f7f4;color:#0c6c60;border:1px solid #b9e8e0}
.melding.fout{background:#fdecea;color:#b23c30;border:1px solid #f5c6c0}
.melding.info{background:#eaf1fb;color:#2d5aa0;border:1px solid #cadbf3}

/* Statuspil */
.statuspil{display:inline-block;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap}
.s-nieuw{background:#eaf1fb;color:#2d5aa0}
.s-in_behandeling{background:#fff3e0;color:#a25c00}
.s-verzonden{background:#e7f0ff;color:#1f5bd0}
.s-geleverd{background:#e6f7f4;color:#0c6c60}
.s-geannuleerd{background:#f1f1f3;color:#6a6a72}
.s-annul{background:#fdecea;color:#b23c30;margin-left:6px}

/* Stappenbalk */
.orderkop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.orderkop h1{margin:2px 0}
.stappen{list-style:none;display:flex;justify-content:space-between;margin:24px 0;position:relative}
.stappen:before{content:"";position:absolute;top:9px;left:8%;right:8%;height:2px;background:var(--lijn);z-index:0}
.stappen li{position:relative;z-index:1;text-align:center;flex:1;font-size:.8rem;color:var(--grijs)}
.stappen .bol{display:block;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--lijn);margin:0 auto 8px}
.stappen li.gedaan{color:var(--navy);font-weight:600}
.stappen li.gedaan .bol{background:var(--teal);border-color:var(--teal)}

.tt-knop{display:inline-block;background:var(--navy);color:#fff;font-weight:600;padding:12px 18px;
  border-radius:11px;margin:6px 0 4px}
.tt-knop:hover{background:var(--teal-d)}
.subkop{color:var(--navy);margin:24px 0 10px;font-size:1.1rem}

/* Productregels met foto (klant) */
.regellijst{list-style:none}
.regellijst li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.regel-foto{flex:0 0 68px;width:68px;height:68px;border-radius:12px;overflow:hidden;
  background:var(--vlak);border:1px solid var(--lijn);display:grid;place-items:center}
.regel-foto img{width:100%;height:100%;object-fit:cover;display:block}
.regel-foto-leeg{width:34px;height:34px;color:#b7c3cf}
.regel-tekst{flex:1;display:flex;flex-direction:column;gap:3px}
.regel-tekst strong{color:var(--inkt);font-weight:600}
.regel-prijs{font-weight:800;color:var(--navy);white-space:nowrap}

/* Mini-foto (beheer) */
.mini-foto{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:9px;
  overflow:hidden;background:var(--vlak);border:1px solid var(--lijn)}
.mini-foto img{width:100%;height:100%;object-fit:cover}
.mini-foto-leeg{font-size:.8rem;font-weight:700;color:var(--grijs)}
.regeltabel{width:100%;border-collapse:collapse}
.regeltabel td{padding:9px 6px;border-bottom:1px solid var(--lijn);font-size:.92rem}
.regeltabel td.rechts{text-align:right;font-weight:600;white-space:nowrap}
.rechts{text-align:right}
.annuleer{margin:18px 0}
.tijdlijn{list-style:none}
.tijdlijn li{padding:8px 0;border-bottom:1px solid var(--lijn);font-size:.9rem}
.tl-moment{color:var(--grijs);font-size:.8rem;margin-right:8px}

/* ---------- Beheer ---------- */
body.beheer{background:var(--vlak)}
.bh-top{background:var(--navy)}
.bh-top-in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.bh-top .logo-tekst{color:#fff}
.bh-top .logo-tekst em{color:var(--teal);font-style:normal;font-weight:600;font-size:.85rem}
.logo-mark.klein{width:32px;height:32px;padding:6px}
.bh-nav{display:flex;gap:20px}
.bh-nav a{color:#c6d4e6;font-weight:600;font-size:.9rem}
.bh-nav a:hover{color:#fff}
.bh-kern{max-width:1180px;margin:0 auto;padding:26px 20px}
.bh-kop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.bh-kop h1{color:var(--navy);font-size:1.6rem}
.terug{color:var(--teal);font-weight:600;font-size:.85rem}

.tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.tegel{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:16px;text-align:center;font-size:.82rem;color:var(--grijs)}
.tegel span{display:block;font-size:1.6rem;font-weight:800;color:var(--navy)}
.tegel.attentie{border-color:var(--deal)}
.tegel.attentie span{color:var(--deal)}

.filterbalk{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filterbalk input{flex:1;min-width:200px;border:1px solid var(--lijn);border-radius:10px;padding:10px 14px}
.filterbalk select{border:1px solid var(--lijn);border-radius:10px;padding:10px 14px}

.bh-tabel{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:12px;overflow:hidden}
.bh-tabel th{text-align:left;padding:12px 14px;background:var(--vlak);font-size:.8rem;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em}
.bh-tabel td{padding:12px 14px;border-top:1px solid var(--lijn);font-size:.9rem;vertical-align:top}
.bh-tabel .leeg{text-align:center;color:var(--grijs);padding:30px}

.bh-raster{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.bh-kaart{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:20px;margin-bottom:16px}
.bh-kaart h3{color:var(--navy);font-size:1rem;margin-bottom:10px}
.bh-kaart h3.mt{margin-top:20px}
.bh-zij .bh-kaart{margin-bottom:16px}
.attentievak{border-color:var(--deal)}
.knoprij{display:flex;gap:10px}

/* Beheer-login */
.bh-login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#003a8f,#0071ce);padding:20px}
.bh-login-kaart{background:#fff;border-radius:16px;padding:34px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.bh-login-kaart .logo-mark{width:52px;height:52px;padding:12px;margin:0 auto 14px}
.bh-login-kaart h1{color:var(--navy);font-size:1.4rem;margin-bottom:16px}
.bh-login-kaart .veldform{text-align:left}

/* Responsief */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-beeld{display:none}
  .usps{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .banners{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr}
  .bh-raster{grid-template-columns:1fr}
  .tegels{grid-template-columns:repeat(3,1fr)}
  .volgblok{flex-direction:column;text-align:center}
}
@media(max-width:620px){
  .header-in{flex-wrap:wrap;gap:12px}
  .hoofdnav{order:3;flex:1 1 100%;justify-content:center}
  .grid{grid-template-columns:1fr 1fr}
  .logo-tekst{font-size:1.2rem}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .stappen li{font-size:.7rem}
}