/* Metaal Machines – industrial theme */
:root{
  --ink:#12181f; --ink2:#1c2732; --steel:#4a5a6b; --muted:#7a8b9c;
  --line:#ced4da; --bg:#dde2e8; --white:#fff;
  --amber:#f08a1d; --amber-d:#c96e0c; --green:#1f8a4c; --red:#b23b3b;
  --rad:12px; --sh:0 2px 8px rgba(18,24,31,.07); --sh2:0 12px 30px rgba(18,24,31,.14);
  --ff:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--ff);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted);font-size:.88rem}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:2rem;letter-spacing:-.02em}
h2{font-size:1.35rem;letter-spacing:-.01em}

/* ---------------- header */
.top{background:var(--ink);color:#eef2f6;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topin{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:1.05rem}
.bmark{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,var(--amber),var(--amber-d));
  box-shadow:inset 0 0 0 3px var(--ink),0 0 0 2px var(--amber);display:inline-block;flex:0 0 auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:8px;color:#cbd6e2;font-weight:600;font-size:.95rem}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.act{background:var(--amber);color:#1a1207}
.langs{display:flex;gap:2px;margin-left:12px}
.langs a{padding:5px 8px;border-radius:6px;font-size:.75rem;font-weight:700;color:#8fa1b3;letter-spacing:.05em}
.langs a.on{background:rgba(255,255,255,.14);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

/* ---------------- hero */
.hero{background:linear-gradient(160deg,#12181f 0%,#1c2732 55%,#26374a 100%);color:#fff;position:relative;overflow:hidden}
.hero:before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%)}
.heroin{position:relative;padding:76px 20px 82px;max-width:820px}
.hero h1{font-size:2.9rem;margin-bottom:16px}
.hero p{font-size:1.12rem;color:#c2cedb;max-width:640px}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hstat{margin-top:26px;color:#93a5b7;font-size:.9rem}
.hstat b{color:var(--amber);font-size:1.1rem}

/* ---------------- buttons */
.btn{display:inline-block;background:var(--amber);color:#1a1207;font-weight:700;border:0;cursor:pointer;
  padding:10px 18px;border-radius:9px;font-size:.95rem;font-family:inherit;transition:.15s}
.btn:hover{background:var(--amber-d);color:#fff}
.btn.big{padding:14px 26px;font-size:1rem}
.btn.sm{padding:6px 11px;font-size:.82rem;border-radius:7px}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;opacity:.85}
.btn.ghost:hover{background:rgba(127,127,127,.12);color:inherit;opacity:1}
.btn.dang{background:#f0dede;color:var(--red)}
.btn.dang:hover{background:var(--red);color:#fff}
.lnk{color:var(--amber-d);font-weight:700}

/* ---------------- sections */
.sec{padding:52px 20px}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sechead h2{margin:0}
.sechead span{color:var(--muted)}
.sechead a{margin-left:auto}
.pagehead{margin-bottom:24px}
.pagehead p{color:var(--muted);margin:0}

/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.cats a{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-weight:600;transition:.15s}
.cats a:hover{border-color:var(--amber);box-shadow:var(--sh);transform:translateY(-1px)}
.cats b{background:var(--bg);color:var(--steel);border-radius:20px;padding:2px 10px;font-size:.8rem}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:#c8d2dd}
.cimg{height:196px;background:#eef1f4 center/contain no-repeat;position:relative;border-bottom:1px solid var(--line)}
.pill{position:absolute;top:10px;left:10px;color:#fff;font-size:.72rem;font-weight:700;
  padding:3px 9px;border-radius:20px;letter-spacing:.02em}
.pill.fav{left:auto;right:10px;background:var(--amber);color:#1a1207}
.cbody{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.ccat{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.card h3{font-size:1.05rem;margin:6px 0 4px}
.cspec{font-size:.85rem;color:var(--steel);margin-bottom:10px}
.cprice{margin-top:auto;font-weight:800;color:var(--ink);font-size:1.1rem}

/* why + cta */
.why{background:var(--ink2);color:#e9eef3;padding:56px 0}
.why h2{margin-bottom:24px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.wcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--rad);padding:20px}
.wcard.light{background:var(--white);border-color:var(--line);color:var(--ink)}
.wcard h3{font-size:1.02rem;margin:10px 0 6px}
.wcard p{margin:0;font-size:.92rem;color:#aebcc9}
.wcard.light p{color:var(--steel)}
.wico{width:38px;height:38px;border-radius:9px;background:var(--amber);color:#1a1207;display:grid;place-items:center;font-size:1.2rem;font-weight:700}
.cta{background:var(--amber);color:#1a1207;padding:34px 0}
.ctain{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{margin:0}
.cta p{margin:4px 0 0}
.ctain .btn{margin-left:auto;background:var(--ink);color:#fff}
.ctain .btn:hover{background:#000}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--rad);padding:12px;margin-bottom:18px}
.filters input,.filters select{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-family:inherit;font-size:.9rem;background:#fff;min-width:120px}
.filters .fsearch{flex:1;min-width:200px}
.filters input:focus,.filters select:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,138,29,.16)}
.rescount{color:var(--muted);margin-bottom:16px}
.rescount b{color:var(--ink)}
.empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--rad);padding:40px;text-align:center;color:var(--steel)}

/* machine detail */
.back{display:inline-block;color:var(--muted);font-weight:600;margin-bottom:16px}
.mtop{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start}
.galmain{height:430px;background:#eef1f4;border-radius:var(--rad);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;position:relative;cursor:zoom-in}
.galmain img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.zoomhint{position:absolute;right:10px;bottom:10px;background:rgba(18,24,31,.72);color:#fff;
  border-radius:8px;padding:4px 9px;font-size:.9rem;pointer-events:none}
.galcap{color:var(--muted);font-size:.82rem;margin-top:8px}
.galthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gt{width:82px;height:60px;border-radius:8px;border:2px solid transparent;background:#eef1f4 center/contain no-repeat;cursor:pointer;padding:0}
.gt.on{border-color:var(--amber)}
.mside{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:22px;position:relative}
.mside .pill{position:static;display:inline-block;margin-bottom:10px}
.mside h1{font-size:1.6rem;margin:0 0 4px}
.msub{color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.mprice{font-size:2rem;font-weight:800;margin:16px 0 2px}
.mprice-note{color:var(--muted);font-size:.82rem;margin-bottom:14px}
.mside .btn{width:100%;text-align:center;margin-top:10px}
.mcontact{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-weight:600;color:var(--steel)}
.mcols{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;margin-top:34px;align-items:start}
.prose{color:#2c3a48}
.prose.narrow{max-width:760px;font-size:1.05rem}
table.spec{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
table.spec th{text-align:left;width:42%;padding:11px 14px;color:var(--steel);font-weight:600;background:#fafbfc;border-bottom:1px solid var(--line);font-size:.92rem}
table.spec td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:.95rem}
.askbox{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:22px}

/* forms */
.frm{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm label,.aform label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:700;color:var(--steel)}
.frm input,.frm textarea,.aform input,.aform select,.aform textarea{border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;font-family:inherit;font-size:.95rem;font-weight:400;color:var(--ink);background:#fff;width:100%}
.frm input:focus,.frm textarea:focus,.aform input:focus,.aform select:focus,.aform textarea:focus{
  outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,138,29,.16)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-radius:9px;padding:12px 14px;margin:12px 0;font-weight:600}
.alert.ok{background:#e6f4ec;color:#14663a;border:1px solid #bfe3cf}
.alert.err{background:#fbeaea;color:#8f2b2b;border:1px solid #f0c9c9}
.cbox{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.clist{list-style:none;padding:0;margin:0 0 14px}
.clist li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.clist span{width:20px;color:var(--amber-d)}

/* footer */
.foot{background:var(--ink);color:#9fb0c1;margin-top:40px;padding:44px 0 0}
.footin{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-bottom:30px}
.fbrand{color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:8px}
.foot h4{color:#fff;margin:0 0 10px;font-size:.95rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{padding:3px 0;font-size:.92rem}
.foot a:hover{color:var(--amber)}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:.85rem}

/* ---------------- login */
.loginbody{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#12181f,#26374a)}
.loginbox{background:#fff;border-radius:16px;padding:32px;width:min(400px,92vw);display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh2)}
.loginbox h1{font-size:1.3rem;margin:0 0 6px}
.lbrand{display:flex;align-items:center;gap:9px;font-weight:800}
.loginbox label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:700;color:var(--steel)}
.loginbox input{border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:.95rem;font-family:inherit}
.loginbox .muted{text-align:center}

/* ---------------- admin */
body.adm{background:var(--bg)}
.aside{position:fixed;top:0;left:0;bottom:0;width:224px;background:var(--ink);color:#c8d4e0;padding:18px 12px;overflow-y:auto}
.abrand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;padding:6px 8px 18px}
.aside nav{display:flex;flex-direction:column;gap:2px}
.aside a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-weight:600;font-size:.93rem}
.aside a i{font-style:normal;width:18px;text-align:center;opacity:.8}
.aside a:hover{background:rgba(255,255,255,.07);color:#fff}
.aside a.on{background:var(--amber);color:#1a1207}
.nbadge{background:var(--green);color:#fff;border-radius:20px;padding:0 7px;font-size:.75rem;margin-left:auto}
.amain{margin-left:224px;padding:24px 28px 60px;max-width:1240px}
.ahead{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ahead h1{margin:0;font-size:1.5rem}
.ahead>div:last-child,.ahead .btn:last-child{margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px}
.kpi span{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.kpi b{font-size:1.7rem}
.kpi.accent{background:var(--amber);border-color:var(--amber)}
.kpi.accent span{color:#5b3d0c}
.afilter{display:flex;gap:8px;margin-bottom:14px}
.afilter input{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;min-width:240px}
.atbl{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.atbl th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:10px 12px;background:#fafbfc;border-bottom:1px solid var(--line)}
.atbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.93rem}
.atbl tr:hover td{background:#fbfcfd}
.atbl input,.atbl select{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:.88rem;width:100%}
.tmb{width:64px;height:44px;border-radius:7px;background:#eef1f4 center/contain no-repeat}
.tright{text-align:right;white-space:nowrap}
.inl{display:inline-block;margin:0}
.star{background:none;border:0;font-size:1.15rem;cursor:pointer;color:#ccd4dc}
.star.on{color:var(--amber)}
.acard{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:20px;margin-bottom:18px}
.acard h2{font-size:1.05rem;margin:0 0 14px}
.aform .grid3,.acard .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.aform .chk,.acard .chk{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.aform .chk input,.acard .chk input{width:auto}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tb{background:#eef1f4;border:0;border-radius:8px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--steel)}
.tb.on{background:var(--ink);color:#fff}
.tp{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-family:inherit;font-size:.95rem}
.hide{display:none}
.pgrid{display:flex;flex-wrap:wrap;gap:10px}
.pitem{width:130px}
.pimg{height:92px;border-radius:8px;background:#eef1f4 center/contain no-repeat;margin-bottom:5px}
.pitem input{width:100%;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-family:inherit}
.inq.new{border-left:4px solid var(--green)}
.inqhead{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.inqhead>div:last-child{margin-left:auto}
.inqhead .pill{position:static;display:inline-block;margin-left:6px}
.inqm{margin:10px 0 6px;font-size:.9rem}
.inqm a{color:var(--amber-d);font-weight:700}
.inqtxt{background:#fafbfc;border:1px solid var(--line);border-radius:9px;padding:12px;margin:8px 0}
.inqact{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------- responsive */
@media(max-width:900px){
  .mtop,.mcols,.footin{grid-template-columns:1fr}
  .galmain{height:270px}
  .hero h1{font-size:2.05rem}
  .heroin{padding:52px 20px 58px}
  .aside{position:static;width:auto;display:flex;flex-direction:column}
  .aside nav{flex-direction:row;overflow-x:auto}
  .aside a{white-space:nowrap}
  .amain{margin-left:0;padding:18px 14px 50px}
}
@media(max-width:760px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--ink2);flex-direction:column;padding:10px}
  body.navopen .nav{display:flex}
  .langs{margin-left:0;order:3}
  .frow{grid-template-columns:1fr}
  .filters{flex-direction:column}
  .filters input,.filters select{width:100%}
  .atbl,.atbl tr,.atbl td,.atbl th,.atbl tbody{display:block}
  .atbl th{display:none}
  .atbl tr{border-bottom:2px solid var(--line);padding:8px 0}
  .atbl td{border:0;padding:5px 12px}
  .tright{text-align:left}
}

/* polish */
.mcols h2{margin-top:30px}
.mcols>div>h2:first-child{margin-top:0}
.prose+h2{margin-top:26px}

/* ---------------- lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,14,18,.94);display:grid;place-items:center;padding:40px 60px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lbbtn{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  width:48px;height:48px;border-radius:50%;font-size:1.6rem;line-height:1;display:grid;place-items:center;transition:.15s}
.lbbtn:hover{background:var(--amber);color:#1a1207}
.lbclose{top:18px;right:18px;font-size:1.2rem}
.lbprev{left:14px;top:50%;transform:translateY(-50%)}
.lbnext{right:14px;top:50%;transform:translateY(-50%)}
.lbcount{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#c7d2dd;font-size:.86rem;
  background:rgba(255,255,255,.1);padding:4px 12px;border-radius:20px}
.mside .pdfbtn{width:100%;text-align:center;margin-top:8px}

/* ---------------- youtube */
.ytwrap{position:relative;padding-top:56.25%;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:#000}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:760px){
  .lb{padding:16px 8px}
  .lbprev,.lbnext{width:40px;height:40px}
}

/* ---------------- foto-pozadina (hero + wallpaper) */
.hero{isolation:isolate}
.hero:after{content:'';position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(100deg,rgba(18,24,31,.93) 0%,rgba(18,24,31,.72) 38%,rgba(28,39,50,.34) 100%),var(--hero,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero:before{z-index:1}
.heroin{z-index:2}
.why{position:relative;overflow:hidden;isolation:isolate}
.why>.wrap{position:relative;z-index:2}

/* mozaik fotki masina u herou */
.heropics{position:absolute;inset:0;z-index:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.heropics span{background:#1c2732 center/cover no-repeat;display:block}
.hero:after{z-index:1}
.hero:before{z-index:2}
.heroin{z-index:3}
@media(max-width:760px){.heropics{grid-auto-flow:row;grid-auto-rows:1fr;grid-auto-columns:auto}}

/* ---------------- WhatsApp dugme + traka za usporedbu */
.wafab{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.15s}
.wafab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;padding:9px 14px;border-radius:30px;box-shadow:0 8px 26px rgba(0,0,0,.3);font-weight:700;font-size:.9rem}
.cmpbar[hidden]{display:none}
.cmpbar .btn.ghost{color:#fff}
.cbtn{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(255,255,255,.94);color:var(--ink);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit}
.cbtn:hover{background:var(--amber);border-color:var(--amber);color:#1a1207}
.cbtn.on{background:var(--amber);border-color:var(--amber);color:#1a1207}
.mside .cbtn{position:static;display:block;width:100%;margin-top:8px;padding:9px;font-size:.9rem;border-radius:9px}
.chkline{flex-direction:row!important;align-items:center;gap:9px;color:var(--ink)!important}
.chkline input{width:auto}
/* usporedba - tabela */
.cmptbl{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.cmptbl th,.cmptbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
.cmptbl th{text-align:left;background:#fafbfc;color:var(--steel);width:190px;font-weight:600}
.cmptbl .cimgsm{height:130px;background:#eef1f4 center/contain no-repeat;border-radius:8px;margin-bottom:8px}
.cmpwrap{overflow-x:auto}
.fsold{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--steel);font-weight:600;padding:0 6px}
.fsold input{width:auto;min-width:0}

/* paginacija */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin:28px 0 6px;flex-wrap:wrap}
.pager .pnow{background:var(--amber);color:#1a1207;font-weight:800;border-radius:7px;padding:6px 12px;font-size:.85rem}
.pager .pgap{color:var(--muted);padding:0 2px}
/* malo dublja pozadina (manje bijelo) */
.atbl th,table.spec th,.cmptbl th{background:#eef2f6}
.inqtxt{background:#f2f5f8}
.kpi,.acard,.card,.cats a,.filters,.askbox,.cbox,.empty{box-shadow:0 1px 2px rgba(18,24,31,.05)}

/* ---------------- premium: dubina + presijavanje pozadine */
html{
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 680px at 12% -12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1000px 620px at 88% 0%,  rgba(120,128,136,.16), transparent 62%),
    radial-gradient(900px 780px at 55% 108%, rgba(48,54,61,.18), transparent 66%),
    linear-gradient(165deg, rgba(255,255,255,.26) 0%, rgba(70,77,85,.08) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* spori sjaj koji prelazi preko pozadine */
body:after{
  content:'';position:fixed;inset:-25% -60%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.42) 44%,
    rgba(255,255,255,.10) 50%,
    rgba(90,98,107,.22) 56%,
    transparent 66%);
  animation:sheen 26s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translate3d(-10%,0,0)}50%{transform:translate3d(10%,0,0)}100%{transform:translate3d(-10%,0,0)}}
@media (prefers-reduced-motion:reduce){body:after{animation:none}}

/* blagi sjaj i na karticama/dugmadima (premium osjecaj, bez sarenila) */
.card,.acard,.askbox,.cbox,.kpi,.filters{background-image:linear-gradient(180deg,#fff,#f6f9fb)}
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.06))}
.btn.ghost{background-image:none}
.hero .hbtns .btn{box-shadow:0 6px 18px rgba(240,138,29,.28)}
.top{background-image:linear-gradient(180deg,#182029,#12181f)}

/* ---------------- presijavanje tamnosive trake (header / footer / tamne sekcije) */
.top,.foot,.why,.aside{position:relative;overflow:hidden}
.top:after,.foot:after,.why:after,.aside:after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;right:-40%;pointer-events:none;z-index:0;
  background:linear-gradient(112deg,
    transparent 34%,
    rgba(255,255,255,.045) 43%,
    rgba(255,255,255,.13)  48%,
    rgba(255,255,255,.045) 53%,
    transparent 62%);
  animation:metalsheen 16s ease-in-out infinite;
}
.foot:after{animation-duration:22s;animation-delay:-6s}
.why:after{animation-duration:19s;animation-delay:-3s}
.aside:after{animation-duration:24s;animation-delay:-9s}
@keyframes metalsheen{0%{transform:translate3d(-16%,0,0)}50%{transform:translate3d(16%,0,0)}100%{transform:translate3d(-16%,0,0)}}
@media (prefers-reduced-motion:reduce){.top:after,.foot:after,.why:after,.aside:after{animation:none}}
/* sadrzaj iznad sjaja */
.topin,.footin,.fbot,.why>.wrap,.abrand,.aside nav{position:relative;z-index:2}
/* tamnosivi prelaz umjesto ravne boje */
.top{background-image:linear-gradient(100deg,#12181f 0%,#1d2732 45%,#151c24 100%)}
.foot{background-image:linear-gradient(100deg,#12181f 0%,#1d2732 55%,#12181f 100%)}

/* logo */
.brand .blogo{height:34px;width:auto;display:block}
.foot .flogo{height:32px;width:auto;margin-bottom:10px}
.abrand img{display:block}
@media(max-width:760px){.brand .blogo{height:28px}}

/* sacuvana pretraga */
.alertbox{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(100deg,#12181f,#1d2732);color:#e9eef3;border-radius:var(--rad);padding:20px 22px;margin-top:26px}
.alertbox h3{margin:0 0 4px;color:#fff;font-size:1.05rem}
.alertbox .muted{color:#9fb0c1}
.alform{display:flex;gap:8px;flex-wrap:wrap}
.alform input{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  border-radius:9px;padding:10px 12px;font-family:inherit;font-size:.92rem;min-width:170px}
.alform input::placeholder{color:#8fa1b3}
.alform input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,138,29,.2)}
@media(max-width:760px){.alform,.alform input{width:100%}}

/* ============================================================ Hero zonder bijgesneden foto's */
.heropics{display:none}
.hero .heroin.met-machine{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;max-width:1200px}
.herotekst{max-width:640px}
.heromach{background:#fff;border-radius:16px;padding:18px;display:block;color:var(--ink);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.55);transition:.18s;position:relative}
.heromach:hover{transform:translateY(-3px);box-shadow:0 32px 70px -30px rgba(0,0,0,.6);color:var(--ink)}
.hmlabel{position:absolute;top:-12px;left:18px;background:var(--or);color:#2a1500;font-size:.72rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px}
.hmfoto{display:grid;place-items:center;height:270px;background:#f2f5f8;border-radius:10px;overflow:hidden}
.hmfoto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hminfo{display:block;padding:14px 6px 4px}
.hminfo b{display:block;font-size:1.15rem;line-height:1.25}
.hmcat{display:block;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-top:4px}
.hmprijs{display:block;font-size:1.25rem;font-weight:800;margin-top:8px}
@media(max-width:900px){
  .hero .heroin.met-machine{grid-template-columns:1fr;gap:26px}
  .hmfoto{height:210px}
}
/* geen bijgesneden foto meer in de hero – alleen kleurverloop */
.hero:after{background-image:linear-gradient(100deg,rgba(18,24,31,.30) 0%,rgba(28,39,50,.10) 60%,transparent 100%)}
.hero{background:linear-gradient(120deg,#101d2b 0%,#1b3654 55%,#26507c 100%)}
/* hero-tekst mag niet onder de machinekaart lopen */
.heroin.met-machine .herotekst h1{font-size:2.45rem;overflow-wrap:break-word;hyphens:auto}
.heroin.met-machine .herotekst p{max-width:100%}
@media(max-width:1100px){.heroin.met-machine .herotekst h1{font-size:2.1rem}}

/* ============================================================ Foto's nooit bijsnijden */
.galmain img,.hmfoto img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none}
.galmain{height:460px;background:#f2f5f8}
.cimg{background-size:contain}
.gt{background-size:contain}
@media(max-width:900px){.galmain{height:300px}}
/* definitieve fix: foto krijgt een vast kader, object-fit doet de rest */
.galmain{display:block;position:relative;overflow:hidden}
.galmain img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px}
.hmfoto{display:block;position:relative;overflow:hidden}
.hmfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain}
/* hero terug zoals eerder: mozaïek van machinefoto's onder het donkere verloop */
.heropics{display:grid}
.hero:after{background-image:linear-gradient(100deg,rgba(18,24,31,.93) 0%,rgba(18,24,31,.72) 38%,rgba(28,39,50,.34) 100%),var(--hero,none)}
.hero{background:var(--ink)}

/* ============================================================ LICHTER & LEVENDIGER (v31) */
:root{
  --bg:#eaeff5; --line:#dbe2ea;
  --sky:#2f7fc4; --sky-l:#8fc4ea; --mint:#0f9d76;
}
/* --- hero: lichter, met kleur i.p.v. bijna zwart --- */
.hero{background:linear-gradient(120deg,#1b3a5c 0%,#28598c 52%,#3f86c4 100%)}
.hero:after{background-image:
  linear-gradient(100deg,rgba(16,34,54,.80) 0%,rgba(24,62,98,.56) 40%,rgba(44,110,168,.24) 100%),
  var(--hero,none)}
.heropics span{filter:saturate(1.05) brightness(1.12)}
.hero p{color:#dbe8f4}
.hstat{color:#b9d0e4}
/* zachte lichtvlek rechtsboven, geeft diepte zonder donker te worden */
.hero .heroin:before{content:'';position:absolute;top:-140px;right:-120px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(143,196,234,.30) 0%,rgba(143,196,234,0) 70%)}
/* --- pagina: lichter behang, meer lucht --- */
body:before{opacity:.06!important;filter:grayscale(.35) blur(3px)!important}
body:after{opacity:.5}
/* afwisselende secties: wit / licht getint */
.sec{background:transparent}
.sec:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35))}
/* --- categorieën: kleur en leven --- */
.cats a{background:#fff;border-color:#e2e8f0;transition:.16s}
.cats a:hover{border-color:var(--sky);box-shadow:0 8px 20px -12px rgba(47,127,196,.55);transform:translateY(-2px)}
.cats b{background:linear-gradient(180deg,#eef4fa,#e2ecf6);color:#2b628f}
.cats a:hover b{background:var(--amber);color:#2a1c02}
/* --- kaarten: witter, luchtiger, accent bij hover --- */
.card{border-color:#e3e9f0}
.card:hover{border-color:var(--sky-l);box-shadow:0 16px 34px -20px rgba(24,62,98,.45)}
.cimg{background-color:#fff}
.pill{box-shadow:0 4px 10px rgba(0,0,0,.18)}
/* --- 'waarom bij ons': niet meer bijna zwart maar diepblauw --- */
.why{background:linear-gradient(120deg,#1b3a5c 0%,#28598c 60%,#2f7fc4 100%);color:#eaf3fb}
.wcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--rad);padding:18px}
.wico{color:#ffd08a}
/* --- CTA-balk in accentkleur --- */
.cta{background:linear-gradient(100deg,#f08a1d 0%,#f5a83f 55%,#ffc46b 100%);color:#2a1c02}
.cta h2,.cta p{color:#2a1c02}
.cta .btn{background:#12283d;color:#fff}
.cta .btn:hover{background:#1b3a5c;color:#fff}
/* --- koppen krijgen een accentstreep --- */
.sechead h2{position:relative;padding-left:14px}
.sechead h2:before{content:'';position:absolute;left:0;top:.15em;bottom:.15em;width:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--amber),#f5a83f)}
/* --- header/footer iets lichter --- */
.top{background-image:linear-gradient(100deg,#16202b 0%,#22354a 45%,#18232f 100%)}
.foot{background-image:linear-gradient(100deg,#18232f 0%,#22354a 55%,#18232f 100%)}

/* ============================================================ STAAL-LOOK ERUIT (v32)
   geen metallic sheen, geen grijze staalwas – gewoon schoon en licht */
html{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -10%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(143,196,234,.20), transparent 64%);
  background-attachment:fixed;background-repeat:no-repeat;
}
body:after{display:none!important;content:none!important;animation:none!important}
.top:after,.foot:after,.why:after,.aside:after{display:none!important;content:none!important;animation:none!important}
.card,.acard,.askbox,.cbox,.kpi,.filters{background-image:none;background-color:#fff}
.btn{background-image:none}
.hero .hbtns .btn{box-shadow:0 6px 18px rgba(240,138,29,.30)}
/* header/footer effen, zonder metaalglans */
.top{background-image:none;background:#17222e}
.foot{background-image:none;background:#17222e}
.atbl th,table.spec th,.cmptbl th{background:#eff4f9}

/* ============================================================ LICHT ONTWERP (v33)
   weg van de donkere staalkleur: witte header, lichte secties, lichte voet */
:root{
  --ink:#1d2a38; --ink2:#2b4257; --muted:#6f7f90;
  --bg:#f4f7fb; --line:#e2e8f0;
  --sky:#2f7fc4; --sky-l:#8fc4ea; --sky-xl:#eaf3fb;
}
html{background-image:
  radial-gradient(1100px 620px at 12% -10%, #ffffff, transparent 62%),
  radial-gradient(900px 560px at 92% 4%, rgba(143,196,234,.18), transparent 64%)}
/* --- header: wit --- */
.top{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(6px);
  color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(29,42,56,.06)}
.nav a{color:#3d4f63}
.nav a:hover{background:#eef3f9;color:#14202c}
.nav a.act{background:var(--amber);color:#2a1c02}
.langs a{color:#8695a6}
.langs a.on{background:var(--ink);color:#fff}
.burger{color:var(--ink)}
.brand{color:var(--ink)}
/* --- hero: lichtblauw, foto's beter zichtbaar --- */
.hero{background:linear-gradient(120deg,#2b5f92 0%,#3a82c2 55%,#63a8dc 100%)}
.hero:after{background-image:
  linear-gradient(100deg,rgba(23,52,82,.72) 0%,rgba(38,88,136,.44) 42%,rgba(90,150,200,.14) 100%),
  var(--hero,none)}
.heropics span{filter:saturate(1.06) brightness(1.18)}
.hero h1{text-shadow:0 2px 18px rgba(12,30,48,.35)}
.hero p{color:#e7f1fa}
.hstat{color:#cfe3f3}
/* --- secties licht --- */
.sec:nth-of-type(even){background:linear-gradient(180deg,#fff,rgba(255,255,255,.5))}
.cats a{border-color:#e4eaf1}
/* --- 'waarom bij ons': licht blauw i.p.v. donker blok --- */
.why{background:linear-gradient(180deg,var(--sky-xl),#f6fafd);color:var(--ink)}
.why h2{color:var(--ink)}
.wcard{background:#fff;border:1px solid #dbe6f1;box-shadow:0 1px 2px rgba(29,42,56,.05),0 14px 30px -24px rgba(29,42,56,.4)}
.wcard p,.wcard span{color:#5c6b7c}
.wico{color:#fff;background:linear-gradient(140deg,var(--amber),#f5a83f);border-radius:9px}
/* --- voet: licht --- */
.foot{background:#eef3f8;color:#54657a;border-top:1px solid var(--line)}
.foot h4{color:var(--ink)}
.foot a:hover{color:var(--amber-d)}
.fbot{border-top:1px solid #dde5ee;color:#8695a6}
.aside{background:#fff;color:var(--ink)}

/* ============================================================ ONTWERP 3 – LICHT & FOTO-EERST (v34)
   vaste keuze: witte UI, geen foto-behang, foto's krijgen alle ruimte, fel oranje accent */
:root{
  --ink:#233040; --ink2:#31435a; --steel:#5b7086; --muted:#77869a;
  --line:#e3e8ee; --bg:#f6f8fa;
  --amber:#ff6a00; --amber-d:#e05c00;
}
/* geen foto-behang meer achter de pagina */
body:before{display:none!important;content:none!important}
html{background-color:var(--bg);background-image:
  radial-gradient(1100px 620px at 12% -10%, #ffffff, transparent 60%),
  radial-gradient(900px 560px at 92% 2%, rgba(143,196,234,.14), transparent 62%)}
/* header wit, rustig */
.top{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line);
  box-shadow:0 1px 10px rgba(35,48,64,.05)}
.nav a{color:#31435a}
.nav a:hover{background:#eef2f7;color:#111}
.nav a.act{background:var(--amber);color:#fff}
.langs a{color:#8a97a6}
.langs a.on{background:#233040;color:#fff}
/* hero blijft, maar met het nieuwe accent */
.hero{background:linear-gradient(120deg,#233040 0%,#31435a 55%,#3f5872 100%)}
.hero:after{background-image:
  linear-gradient(100deg,rgba(35,48,64,.80) 0%,rgba(49,67,90,.50) 42%,rgba(63,88,114,.18) 100%),
  var(--hero,none)}
.hero .hbtns .btn{box-shadow:0 8px 22px rgba(255,106,0,.32)}
.btn{color:#fff}
.btn:hover{background:var(--amber-d);color:#fff}
.btn.ghost{color:#fff}
/* foto's centraal: grotere, witte beeldvlakken */
.cimg{height:236px;background-color:#fff;background-size:contain}
.card{border-color:#e6ebf1;background:#fff}
.card:hover{border-color:#cfdae6;box-shadow:0 18px 36px -22px rgba(35,48,64,.5)}
.card,.acard,.askbox,.cbox,.kpi,.filters{box-shadow:0 1px 2px rgba(35,48,64,.05),0 10px 24px -18px rgba(35,48,64,.35)}
.galmain{height:520px;background:#fff;border:1px solid var(--line);border-radius:var(--rad)}
@media(max-width:900px){.galmain{height:320px}}
/* categorieën / koppen in het nieuwe accent */
.cats a:hover{border-color:var(--amber);box-shadow:0 8px 20px -12px rgba(255,106,0,.45)}
.cats a:hover b{background:var(--amber);color:#fff}
.sechead h2:before{background:linear-gradient(180deg,var(--amber),#ff9346)}
.hstat b{color:#ffb37a}
/* lichte 'waarom bij ons' met oranje iconen */
.why{background:linear-gradient(180deg,#eef3f8,#f8fafc);color:var(--ink)}
.wico{background:linear-gradient(140deg,var(--amber),#ff9346);color:#fff}
/* voet: donker anker onder de lichte pagina */
.foot{background:#233040;color:#a9b7c6;border-top:0}
.foot h4{color:#fff}
.foot a:hover{color:var(--amber)}
.fbot{border-top:1px solid rgba(255,255,255,.10);color:#8896a6}
.cta{background:linear-gradient(100deg,#ff6a00 0%,#ff8c33 55%,#ffab66 100%);color:#fff}
.cta h2,.cta p{color:#fff}
.cta .btn{background:#233040;color:#fff}
.cta .btn:hover{background:#31435a}

/* ---- omschrijving/specificaties/video in dezelfde kaartvorm als de zijkolom (v35) */
.mbox{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;margin:0 0 18px;
  box-shadow:0 1px 2px rgba(35,48,64,.05),0 10px 24px -18px rgba(35,48,64,.35)}
.mbox>h2{margin:0 0 14px;font-size:1.12rem;position:relative;padding-left:13px}
.mbox>h2:before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--amber),#ff9346)}
.mbox .prose{color:#3a4a5c;font-size:.97rem}
/* tabel zit al in de kaart: geen dubbele rand meer */
.mbox table.spec{border:0;border-radius:0}
.mbox table.spec tr:last-child th,.mbox table.spec tr:last-child td{border-bottom:0}
.mbox table.spec th{background:#f7f9fc}
.mbox .ytwrap{margin:0}
.mcols>div>section.mbox:first-child>h2{margin-top:0}
/* zijkolom-kaart krijgt hetzelfde koptype */
.askbox>h2{font-size:1.12rem;position:relative;padding-left:13px}
.askbox>h2:before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--amber),#ff9346)}

/* ---- knoppen in de zijkolom: één familie, allemaal even zichtbaar (v36) */
.mside .btn.big{width:100%;text-align:center;padding:14px 18px;font-size:1.02rem}
.mside .cbtn,.mside .pdfbtn{width:100%;text-align:center;margin-top:8px;padding:12px 16px;font-size:.95rem;
  border-radius:10px;font-weight:700;transition:.15s}
/* secundair: witte knop met duidelijke donkere rand i.p.v. bijna onzichtbaar */
.mside .cbtn{background:#fff;color:var(--ink);border:2px solid #cbd6e2;box-shadow:none}
.mside .cbtn:hover{background:#f2f6fa;border-color:var(--ink);color:var(--ink)}
.mside .cbtn.on{background:var(--amber);border-color:var(--amber);color:#fff}
.mside .btn.ghost.pdfbtn{background:#fff;color:var(--ink);box-shadow:none;border:2px solid #cbd6e2;opacity:1}
.mside .btn.ghost.pdfbtn:hover{background:#f2f6fa;border-color:var(--ink);color:var(--ink)}
/* WhatsApp in zijn eigen groen, past bij de zwevende knop rechtsonder */
.mside .wabtn{background:#25d366;border-color:#25d366;color:#fff}
.mside .wabtn:hover{background:#1eb355;border-color:#1eb355;color:#fff}
/* telefoon/e-mail eronder wat rustiger */
.mcontact{border-top:1px solid var(--line);padding-top:14px}
.mcontact a:hover{color:var(--amber-d)}
/* WhatsApp moet de pdf-regel overrulen; randen iets steviger (v37) */
.mside .cbtn,.mside .btn.ghost.pdfbtn{border-color:#b7c5d5;color:#233040}
.mside .btn.ghost.pdfbtn.wabtn{background:#25d366;border-color:#25d366;color:#fff}
.mside .btn.ghost.pdfbtn.wabtn:hover{background:#1eb355;border-color:#1eb355;color:#fff}

/* ---- logo groter en scherper + nette taalkiezer met vlaggen (v38) */
.brand .blogo{height:44px}
.foot .flogo{height:40px}
@media(max-width:760px){.brand .blogo{height:34px}}
.langs{gap:4px;margin-left:14px;padding-left:14px;border-left:1px solid var(--line);align-items:center}
.langs a{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;border-radius:8px;
  border:1px solid transparent;color:#6d7d8f;font-size:.74rem;letter-spacing:.06em;line-height:1}
.langs a:hover{background:#f1f5f9;color:#233040}
.langs a.on{background:#fff;border-color:#cdd8e4;color:#233040;box-shadow:0 1px 2px rgba(35,48,64,.08)}
.langs .vlag{display:block;width:20px;height:14px;border-radius:3px;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(35,48,64,.16) inset;opacity:.85}
.langs a:hover .vlag,.langs a.on .vlag{opacity:1}
.langs .vlag svg{display:block;width:100%;height:100%}
.langs b{font-weight:700}
@media(max-width:520px){.langs b{display:none}.langs a{padding:5px 6px}}
/* mobiel: vlaggen netjes naast de menuknop, niet buiten beeld (v39) */
@media(max-width:760px){
  .topin{flex-wrap:nowrap;gap:10px}
  .langs{order:2;margin-left:auto;padding-left:0;border-left:0;gap:2px}
  .burger{order:3;margin-left:2px}
  .langs a{padding:5px 6px}
  .langs b{display:none}
}
/* kleine telefoons: alles op één regel houden (v40) */
@media(max-width:560px){
  .topin{gap:6px;padding-left:12px;padding-right:12px}
  .brand .blogo{height:30px}
  .langs{gap:0}
  .langs a{padding:4px}
  .langs .vlag{width:18px;height:12px}
  .burger{font-size:1.35rem;padding:0 2px}
}
/* niets mag de pagina breder maken dan het scherm (v41) */
html,body{max-width:100%;overflow-x:hidden}
.topin{min-width:0}
.brand{flex:0 1 auto;min-width:0}
.brand .blogo{max-width:44vw;object-fit:contain}
.langs{flex:0 0 auto}
.burger{flex:0 0 auto}
.cats a{min-width:0}
/* (afbreken per teken teruggedraaid – zie v45) */
@media(max-width:560px){
  .cats{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem;overflow-wrap:anywhere}
  .hero p{overflow-wrap:anywhere}
}

/* ============================================================ PAARSE VOET MET GLANS (v42, proef) */
.foot{position:relative;overflow:hidden;border-top:0;
  background:linear-gradient(115deg,#3b1470 0%,#5b21b6 38%,#7c3aed 62%,#4c1d95 100%);color:#d9cdf5}
.foot h4{color:#fff}
.foot a{color:#e4dbfa}
.foot a:hover{color:#ffb37a}
.fbot{border-top:1px solid rgba(255,255,255,.14);color:#b7a7e0}
.foot:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(700px 300px at 12% 0%,rgba(255,255,255,.18),transparent 60%),
             radial-gradient(600px 320px at 88% 100%,rgba(255,140,60,.16),transparent 62%)}
.foot:after{content:'';position:absolute;top:-60%;bottom:-60%;left:-45%;right:-45%;pointer-events:none;z-index:1;
  display:block;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.22) 50%,
             rgba(255,255,255,.07) 56%,transparent 64%);
  animation:paarsglans 9s ease-in-out infinite}
@keyframes paarsglans{0%{transform:translate3d(-18%,0,0)}50%{transform:translate3d(18%,0,0)}100%{transform:translate3d(-18%,0,0)}}
@media (prefers-reduced-motion:reduce){.foot:after{animation:none}}
.footin,.fbot{position:relative;z-index:2}
/* voetlogo groter (v43) */
.foot .flogo{height:62px;margin-bottom:14px}
@media(max-width:760px){.foot .flogo{height:52px}}

/* ---- categorieboom op de homepage (v44) */
.catgroep{margin-bottom:26px}
.ghead{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:800;font-size:1.05rem;color:var(--ink)}
.ghead b{background:var(--ink);color:#fff;border-radius:20px;padding:2px 11px;font-size:.78rem;font-weight:700}
.ghead:hover{color:var(--amber-d)}
.cats a span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cats .subs{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* categoriekaartjes: getal nooit afbreken, naam netjes afbreken (v45) */
.cats a{gap:10px}
.cats a>span{flex:1 1 auto}
.cats b{flex:0 0 auto;white-space:nowrap}
.cats a,.cats a span{overflow-wrap:normal;word-break:normal;hyphens:auto}
.cats a>span>*:first-child{line-height:1.25}
/* kruimelpad van de categorie op de machinepagina (v46) */
.msub a{color:var(--muted)}
.msub a:hover{color:var(--amber-d);text-decoration:underline}
.msub a:last-child{color:var(--ink);font-weight:700}

/* ---- categoriekaart klapt open bij hover en toont de subcategorieën (v47) */
.cats{align-items:start}
.catkaart{position:relative}
.catkaart .ctop{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;
  border:1px solid #e6ebf1;border-radius:var(--rad);padding:13px 15px;font-weight:700;transition:.16s;
  box-shadow:0 1px 2px rgba(35,48,64,.05)}
.catkaart .ctop span{display:flex;flex-direction:column;gap:2px;min-width:0}
.catkaart .ctop b{flex:0 0 auto;white-space:nowrap;background:linear-gradient(180deg,#eef4fa,#e2ecf6);
  color:#2b628f;border-radius:20px;padding:2px 10px;font-size:.8rem}
.catkaart .subs{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600}
.catkaart:hover .ctop,.catkaart:focus-within .ctop{border-color:var(--amber);transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 30px -14px rgba(255,106,0,.45);z-index:31;position:relative}
.catkaart:hover .ctop b,.catkaart:focus-within .ctop b{background:var(--amber);color:#fff}
/* uitklapper */
.csub{position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:30;background:#fff;
  border:1px solid var(--amber);border-top:0;border-radius:0 0 var(--rad) var(--rad);
  box-shadow:0 20px 36px -18px rgba(35,48,64,.55);padding:10px 8px 8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.catkaart:hover .csub,.catkaart:focus-within .csub{opacity:1;visibility:visible;transform:translateY(0)}
.csub a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;
  font-size:.88rem;font-weight:600;color:#3a4a5c}
.csub a:hover{background:#fff4ec;color:var(--amber-d)}
.csub a i{font-style:normal;font-size:.76rem;color:var(--muted);font-weight:700}
.csub .calle{margin-top:4px;border-top:1px solid var(--line);padding-top:9px;color:var(--amber-d)}
/* aanraakschermen: geen hover – subcategorieën gewoon onder elkaar tonen */
@media(hover:none),(max-width:760px){
  .csub{position:static;opacity:1;visibility:visible;transform:none;border:1px solid var(--line);
    border-top:0;box-shadow:none;padding:4px}
  .catkaart .ctop{border-radius:var(--rad) var(--rad) 0 0}
  .catkaart:hover .ctop{transform:none}
}

/* ---- pagina algemene voorwaarden (v48) */
.vwgrid{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.vwnav{position:sticky;top:86px;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:14px 12px;box-shadow:0 1px 2px rgba(35,48,64,.05),0 10px 24px -18px rgba(35,48,64,.35)}
.vwkop{display:block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:0 8px 8px}
.vwnav a{display:flex;gap:8px;padding:7px 8px;border-radius:8px;font-size:.88rem;font-weight:600;color:#3a4a5c}
.vwnav a:hover{background:#fff4ec;color:var(--amber-d)}
.vwnav a i{font-style:normal;color:var(--muted);font-weight:800;min-width:14px}
.vwnav .vwpdf{margin-top:8px;border-top:1px solid var(--line);padding-top:10px;color:var(--amber-d)}
.vwnote{background:#fff7ed;border:1px solid #ffd7b0;color:#8a4b09;border-radius:var(--rad);
  padding:12px 16px;margin-bottom:20px;font-size:.92rem;font-weight:600}
.vwtekst .mbox{scroll-margin-top:90px}
.vwtekst .mbox>h2{font-size:1.02rem}
@media(max-width:900px){
  .vwgrid{grid-template-columns:1fr}
  .vwnav{position:static}
}
@media print{
  .top,.foot,.vwnav,.wafab,.cmpbar,.vwnote{display:none!important}
  .vwgrid{grid-template-columns:1fr}
  .vwtekst .mbox{border:0;box-shadow:none;padding:0;margin-bottom:14px;break-inside:avoid}
}
.vwnav .vwpdf{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-top:1px solid var(--line);
  font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;padding:10px 8px 4px;color:var(--amber-d)}
.vwnav .vwpdf:hover{color:#b34700}

/* ---- logo in de kop even groot als in de voet (v50) */
.brand .blogo{height:60px;max-width:52vw}
.topin{height:88px}
.vwnav{top:104px}
.vwtekst .mbox{scroll-margin-top:110px}
@media(max-width:760px){
  .brand .blogo{height:44px}
  .topin{height:72px}
  .nav{top:72px}
}
@media(max-width:560px){.brand .blogo{height:38px}}

/* =========================================================================
   Catalogus met vaste filters (webshop-stijl)
   ========================================================================= */
.katalog{display:grid; grid-template-columns:264px minmax(0,1fr); gap:26px; align-items:start}
.facets{position:sticky; top:82px; display:flex; flex-direction:column; gap:14px}
.facets-kop{display:none}
.facet{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 13px}
.facet-kop{font-weight:800; font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px}
.facet-lijst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.facet-lijst li.groep{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:9px 4px 3px;
}
.facet-lijst a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 8px; border-radius:9px; text-decoration:none; color:var(--ink); font-size:.92rem; line-height:1.3;
}
.facet-lijst a:hover{background:var(--bg2, #f2f5f8)}
.facet-lijst a.aan{background:rgba(255,106,0,.12); color:var(--accent, #ff6a00); font-weight:700}
.facet-lijst .tel{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.facet-lijst a.aan .tel{color:inherit}
.facet-sub{list-style:none; margin:2px 0 4px 10px; padding:0 0 0 8px; border-left:2px solid var(--line)}
.facet-lijst li.verborgen{display:none}
.facet-lijst.open li.verborgen{display:block}
.facet-meer{
  margin-top:6px; width:100%; background:none; border:0; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:700; color:var(--accent, #ff6a00); padding:6px; border-radius:8px;
}
.facet-meer:hover{background:var(--bg2, #f2f5f8)}
.facet-knoppen{display:flex; flex-wrap:wrap; gap:6px}
.fzoek{display:flex; gap:6px}
.fzoek input{flex:1; min-width:0}
.fprijs{display:flex; gap:6px}
.fprijs input{width:100%; min-width:0}
.btn.block{display:block; text-align:center}
.filter-toon{display:none}
@media (max-width:900px){
  .filter-toon{display:block; position:sticky; bottom:0; margin-top:10px}
}

.fchip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none;
  font-size:.85rem; font-weight:600;
}
.fchip.aan{border-color:var(--accent, #ff6a00); color:var(--accent, #ff6a00); background:rgba(255,106,0,.08)}
.fchip.leeg{color:var(--muted)}
.fchips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px}
.fchip .tel{font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums}
.fchip.aan .tel{color:inherit; opacity:.8}
.fchip.verborgen{display:none}
.facet-knoppen.open .fchip.verborgen{display:inline-flex}
.facet-tel{float:right; font-weight:600; color:var(--muted)}
.merkzoek{width:100%; margin-bottom:8px}
.facet-knoppen{max-height:none}

.reskop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.reskop .rescount{margin:0}
.reskop .fsort{margin-left:auto}
.reskop .fsort select{min-width:190px}
.filterknop{display:none}

@media (max-width:900px){
  .katalog{grid-template-columns:1fr}
  .filterknop{display:inline-flex}
  .facets{
    position:fixed; z-index:60; left:0; right:0; bottom:0; top:auto; max-height:82vh; overflow-y:auto;
    background:#fff; border-radius:18px 18px 0 0; padding:14px 14px 22px;
    box-shadow:0 -12px 40px rgba(16,34,46,.25); transform:translateY(101%); transition:transform .25s ease;
  }
  body.filteropen .facets{transform:none}
  .facets-kop{display:flex; align-items:center; justify-content:space-between; font-size:1.05rem; margin-bottom:4px}
  .facets-sluit{background:none; border:0; font:inherit; font-weight:700; color:var(--accent, #ff6a00); cursor:pointer}
  .filterdim{position:fixed; inset:0; background:rgba(16,34,46,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s}
  body.filteropen .filterdim{opacity:1; pointer-events:auto}
  body.filteropen{overflow:hidden}
}
@media (min-width:901px){ .filterdim{display:none} }

/* =========================================================================
   Categorienavigatie (zoals bij de grote machineportalen)
   ========================================================================= */
.catnav{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.catnav-kop{
  padding:11px 14px; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:#f7f9fb; border-bottom:1px solid var(--line);
}
.catnav ul{list-style:none; margin:0; padding:4px}
.catnav .crij{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  text-decoration:none; color:var(--ink); font-size:.93rem; line-height:1.25; border-left:3px solid transparent;
}
.catnav .crij:hover{background:#f2f5f8}
.catnav .crij.aan{background:rgba(255,106,0,.10); border-left-color:var(--accent,#ff6a00); color:var(--accent,#ff6a00); font-weight:700}
.catnav .cico-wrap{display:grid; place-items:center; width:26px; height:26px; flex:none; color:var(--muted)}
.catnav .crij.aan .cico-wrap{color:var(--accent,#ff6a00)}
.catnav .cico{width:20px; height:20px}
.catnav .cnaam{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.catnav .ctel{font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.catnav .crij.aan .ctel{color:inherit}
.csubnav{margin:2px 0 6px 34px !important; padding:0 !important; border-left:2px solid var(--line)}
.csubnav a{
  display:flex; justify-content:space-between; gap:8px; padding:6px 10px; text-decoration:none;
  color:var(--muted); font-size:.88rem; border-radius:7px;
}
.csubnav a:hover{background:#f2f5f8; color:var(--ink)}
.csubnav a.aan{color:var(--accent,#ff6a00); font-weight:700}
.catnav-alle{
  display:block; padding:10px 14px; border-top:1px solid var(--line); text-align:center;
  font-weight:700; font-size:.9rem; color:var(--accent,#ff6a00); text-decoration:none;
}
.catnav-alle:hover{background:#f7f9fb}

/* landingspagina: korte lijst naast de machines */
.startgrid{display:grid; grid-template-columns:264px minmax(0,1fr); gap:24px; align-items:start}
.startlijst{display:flex; flex-direction:column; gap:16px}
@media (max-width:900px){
  .startgrid{grid-template-columns:1fr}
  .catnav.kort ul{display:grid; grid-template-columns:1fr 1fr; gap:2px}
}


/* automatische vertaling in het beheer */
.vertaalrij{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:10px; font-size:.9rem}
.vertaalrij .chk{display:flex; align-items:center; gap:6px; margin:0}
.vertaalrij .chk input{width:auto; margin:0}

/* ---- "ik ben geen robot" vinkje bij de formulieren ---- */
.frm .robotbox{display:flex;align-items:center;gap:12px;margin:6px 0 14px;padding:14px 16px;
  background:#fff;border:1px solid #d7dde3;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,32,.05);
  cursor:pointer;user-select:none;max-width:360px;transition:border-color .15s,box-shadow .15s}
.frm .robotbox:hover{border-color:#b9c3cc;box-shadow:0 2px 6px rgba(16,24,32,.08)}
.frm .robotbox input{position:absolute;opacity:0;width:0;height:0}
.frm .robotbox .rvink{flex:0 0 26px;width:26px;height:26px;border:2px solid #c3ccd4;border-radius:4px;
  background:#fff;position:relative;transition:border-color .15s,background .15s}
.frm .robotbox .rvink:after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .15s}
.frm .robotbox input:checked+.rvink{background:#ff6a00;border-color:#ff6a00}
.frm .robotbox input:checked+.rvink:after{transform:rotate(45deg) scale(1)}
.frm .robotbox input:focus-visible+.rvink{outline:2px solid #ff6a00;outline-offset:2px}
.frm .robotbox b{font-weight:600;font-size:.97rem;color:#243039}
.frm .robotbox .rico{margin-left:auto;width:26px;height:26px;color:#9aa6b1;flex:0 0 26px}
.frm .robotbox input:checked~.rico{color:#2e9e4f}
@media(max-width:520px){.frm .robotbox{max-width:none}}