/* Guntram End – Design System (Site + Portal + Backend) */
:root{
  --ink:#0f1318; --steel:#1b222a; --steel2:#27313b; --mid:#5b6671; --soft:#8a95a0; --line:#e1e5e9; --bg:#f3f5f7; --white:#fff;
  --acc:#ff5a00; --acc-d:#d94a00; --acc-l:#fff0e8; --blue:#0b5cad; --green:#14804a; --amber:#b86e00; --red:#c62828;
  --r:10px; --sh:0 1px 2px rgba(15,19,24,.06),0 8px 24px rgba(15,19,24,.07); --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.55 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.78em 1.3em;border-radius:8px;font-weight:700;font-size:.95rem;border:2px solid transparent;cursor:pointer;transition:.15s;background:var(--acc);color:#fff}
.btn:hover{background:var(--acc-d)}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:var(--steel2)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit} .btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.line{background:#fff;color:var(--ink);border-color:var(--line)} .btn.line:hover{border-color:var(--ink)}
.btn.sm{padding:.45em .85em;font-size:.85rem} .btn.lg{padding:1em 1.7em;font-size:1.05rem}
.btn.block{width:100%;justify-content:center}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.7em}
.muted{color:var(--mid)} .small{font-size:.86rem} .right{text-align:right} .nowrap{white-space:nowrap}
.flash{padding:12px 16px;border-radius:8px;margin:12px 0;font-weight:600}
.flash.ok{background:#e6f5ec;color:#0e5a33}.flash.err{background:#fde8e8;color:#8f1d1d}

/* Topbar + Header */
.topbar{background:var(--ink);color:#c9d0d6;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px}
.topbar a:hover{color:#fff} .topbar .sp{display:flex;gap:22px}
.demo-banner{background:var(--acc);color:#fff;text-align:center;font-size:.82rem;font-weight:700;padding:5px 10px}
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.5rem;letter-spacing:.02em}
.logo svg{height:38px;width:auto}
.logo small{display:block;font-weight:600;font-size:.62rem;letter-spacing:.14em;color:var(--mid);text-transform:uppercase;margin-top:-2px}
nav.main{display:flex;gap:4px;margin-left:10px}
nav.main > a, nav.main > .has-mega > a{padding:10px 13px;font-weight:700;font-size:.95rem;border-radius:6px;display:block}
nav.main a:hover{background:var(--bg)}
nav.main a.active{color:var(--acc)}
.has-mega{position:relative}
.mega{position:absolute;left:-40px;top:100%;width:760px;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:var(--sh);padding:22px;display:none;grid-template-columns:repeat(3,1fr);gap:22px}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}
.mega h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:.6em}
.mega a{display:block;padding:5px 0;font-weight:600;font-size:.93rem}.mega a:hover{color:var(--acc)}
.hsearch{flex:1;min-width:210px;max-width:340px;position:relative;margin-left:auto}
.hsearch input{width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:8px;padding:.62em .9em .62em 2.4em;font:inherit;font-size:.92rem}
.hsearch input:focus{outline:none;border-color:var(--acc);background:#fff}
.hsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;color:var(--mid)}
.suggest{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);margin-top:6px;overflow:hidden;display:none;z-index:70}
.suggest a{display:flex;gap:10px;padding:9px 12px;align-items:center;border-bottom:1px solid var(--line);font-size:.9rem}
.suggest a:hover{background:var(--acc-l)} .suggest img{width:38px;height:38px;object-fit:contain}
.hicons{display:flex;gap:6px;align-items:center}
.hicons a{position:relative;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:8px;font-weight:700;font-size:.9rem}
.hicons a:hover{background:var(--bg)} .hicons svg{width:22px;height:22px}
.cartn{position:absolute;top:0;right:0;background:var(--acc);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;font-weight:800}
.burger{display:none;background:none;border:0;padding:8px}
.burger svg{width:26px;height:26px}

/* Hero */
.hero{position:relative;color:#fff;min-height:clamp(540px,80vh,760px);display:flex;align-items:center;overflow:hidden;background:#0b0e12}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(11,14,18,.92) 0%,rgba(11,14,18,.55) 55%,rgba(11,14,18,.15) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p.lead{font-size:1.2rem;max-width:56ch;color:#d3dae0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.hero-search{display:flex;max-width:600px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.hero-search input{flex:1;border:0;padding:1em 1.1em;font:inherit;font-size:1.02rem;outline:none;min-width:0}
.hero-search button{border:0;background:var(--acc);color:#fff;font-weight:800;padding:0 1.4em;cursor:pointer;font-size:1rem}
.hero-search button:hover{background:var(--acc-d)}
.hero .hint{font-size:.85rem;color:#aab4bd;margin-top:10px}
.usps{background:var(--ink);color:#fff}
.usps .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.usp{display:flex;gap:14px;padding:22px 18px;border-left:1px solid #2a323b;align-items:center}
.usp:first-child{border-left:0}
.usp svg{width:34px;height:34px;color:var(--acc);flex:none}
.usp b{display:block;font-size:.98rem} .usp span{font-size:.84rem;color:#a7b1ba}

section.s{padding:84px 0} section.s.alt{background:var(--bg)} section.s.dark{background:var(--steel);color:#fff}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.head p{max-width:60ch;color:var(--mid);margin:0}
.dark .head p{color:#a7b1ba}
.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.cat{position:relative;border-radius:14px;overflow:hidden;background:var(--steel);color:#fff;min-height:290px;display:flex;align-items:flex-end;isolation:isolate}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:.4s;z-index:-1}
.cat:hover img{transform:scale(1.05);opacity:.9}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,14,18,.88));z-index:-1}
.cat div{padding:24px}.cat h3{font-size:1.4rem;margin-bottom:.2em}.cat span{font-size:.9rem;color:#cfd6dc}
.cat .go{display:inline-block;margin-top:10px;font-weight:800;color:var(--acc)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.pcard:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:#cfd5db}
.pcard .im{aspect-ratio:4/3;background:#f6f7f8;display:grid;place-items:center;padding:12px;position:relative}
.pcard .im img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcard .tag{position:absolute;top:10px;left:10px;background:var(--acc);color:#fff;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.06em}
.pcard .bd{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-size:1.02rem;margin:0}.pcard p{font-size:.86rem;color:var(--mid);margin:0}
.pcard .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:10px;font-size:.84rem;color:var(--mid)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.72rem;font-weight:700;background:var(--bg);color:var(--mid);padding:3px 8px;border-radius:99px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:10px 24px;border-left:2px solid #34404b}.stat:first-child{border-left:0}
.stat b{font-size:clamp(2.2rem,4vw,3.3rem);color:var(--acc);display:block;line-height:1;font-weight:900}
.stat span{color:#b9c2cb;font-size:.95rem}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split .vis{border-radius:16px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:5/4;background:var(--steel)}
.split .vis img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;padding:0;margin:18px 0}
.ticks li{padding:7px 0 7px 32px;position:relative;font-weight:600}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.portal-mock{background:#fff;border-radius:14px;box-shadow:var(--sh);border:1px solid var(--line);padding:18px;color:var(--ink)}
.news-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:6px}
.news-card time{font-size:.8rem;color:var(--mid);font-weight:700}
.cta-band{background:linear-gradient(100deg,var(--acc),#ff8a3d);color:#fff;border-radius:18px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{margin:0}
footer.site{background:var(--ink);color:#aeb7bf;padding:60px 0 24px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer.site h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
footer.site a{display:block;padding:3px 0}footer.site a:hover{color:#fff}
footer.site .legal{border-top:1px solid #29313a;margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;font-size:.82rem;flex-wrap:wrap;gap:10px}

/* Pages */
.pagehead{background:var(--steel);color:#fff;padding:46px 0 38px;position:relative;overflow:hidden}
.pagehead h1{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:0 0 .25em}
.pagehead p{color:#b4bec7;margin:0;max-width:70ch}
.crumbs{font-size:.82rem;color:#90a0ad;margin-bottom:10px}.crumbs a:hover{color:#fff}
.catalog{display:grid;grid-template-columns:270px 1fr;gap:34px;padding:34px 0 70px}
.filters{position:sticky;top:96px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.filters h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin:16px 0 6px}
.filters h4:first-child{margin-top:0}
.filters label{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:.92rem;font-weight:600;cursor:pointer}
.filters input[type=checkbox]{accent-color:var(--acc);width:17px;height:17px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input[type=search],input[type=tel],select,textarea{font:inherit;padding:.62em .8em;border:1.5px solid #cdd3d9;border-radius:8px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,90,0,.15)}
.pdp{display:grid;grid-template-columns:420px 1fr;gap:44px;padding:36px 0}
.pdp .gal{background:#f6f7f8;border-radius:14px;padding:24px;display:grid;place-items:center;aspect-ratio:1}
.pdp .gal img{mix-blend-mode:multiply}
table.t{width:100%;border-collapse:collapse;font-size:.93rem}
table.t th{text-align:left;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);padding:10px 12px;border-bottom:2px solid var(--line);background:#fafbfc;position:sticky;top:0}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:hover td{background:#fbfcfd}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:6px}.qty input{width:74px;text-align:center;padding:.4em}
.avail{font-weight:700;font-size:.82rem;display:inline-flex;align-items:center;gap:6px}
.avail::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
.avail.low::before{background:var(--amber)}.avail.out::before{background:var(--red)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin-bottom:.8em}
.badge{display:inline-block;font-size:.73rem;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.b-gray{background:#e9edf0;color:#47525c}.b-blue{background:#e1eefb;color:#0b4f93}.b-green{background:#dff3e8;color:#0e6a3b}.b-amber{background:#fdf0d5;color:#8a5200}.b-red{background:#fde3e3;color:#a11d1d}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}
.form-grid label,.fld label{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px;color:var(--steel2)}
.login-box{max-width:440px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--sh)}
.demo-hint{background:var(--acc-l);border:1px dashed var(--acc);padding:10px 12px;border-radius:8px;font-size:.84rem;margin-top:16px}
.steps{display:flex;gap:8px;margin:0 0 24px;flex-wrap:wrap}
.step{padding:7px 14px;border-radius:99px;background:var(--bg);font-weight:700;font-size:.85rem;color:var(--mid)}
.step.on{background:var(--ink);color:#fff}
.sum{background:var(--bg);border-radius:12px;padding:20px}
.sum .row{display:flex;justify-content:space-between;padding:5px 0}
.sum .row.tot{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;font-weight:900;font-size:1.15rem}
.cols2{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start}
.configurator .opt{display:flex;gap:10px;flex-wrap:wrap}
.configurator .opt label{border:2px solid var(--line);border-radius:10px;padding:12px 16px;cursor:pointer;font-weight:700;background:#fff;transition:.12s;min-width:150px}
.configurator .opt input{display:none}
.configurator .opt input:checked + span{color:var(--acc)}
.configurator .opt label:has(input:checked){border-color:var(--acc);background:var(--acc-l)}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.in{opacity:1;transform:none}

@media(max-width:1020px){
  nav.main,.hsearch{display:none} .burger{display:block;margin-left:auto}
  body.nav-open nav.main{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 20px 20px;border-bottom:1px solid var(--line);box-shadow:var(--sh)}
  body.nav-open .has-mega .mega{display:none!important}
  .usps .wrap{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .split,.pdp,.catalog,.cols2{grid-template-columns:1fr} .filters{position:static}
  .stats{grid-template-columns:repeat(2,1fr);gap:20px} footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr} section.s{padding:56px 0} .hicons a span.lbl{display:none}
  .form-grid{grid-template-columns:1fr} .topbar .sp:last-child{display:none} .cta-band{padding:28px}
  table.t.resp thead{display:none} table.t.resp td{display:block;border:0;padding:4px 12px} table.t.resp tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.hero video{display:none}}
@media print{.topbar,header.site,footer.site,.no-print{display:none!important}}