@charset "UTF-8";
:root{
  --nx-red:#5A1418;   --nx-red-d:#3E0D10;
  --nx-bord:#5A1418;  --nx-bord-d:#3E0D10;
  --nx-gold:#F5E9D4;  --nx-gold-l:#EADAB9;
  --nx-paper:#F5E9D4; --nx-cream:#F5E9D4;
  --nx-ink:#2A1B1C;   --nx-mute:#6B6760;
  --nx-line:#E4DFD1;  --nx-white:#fff;
  --nx-radius:4px;    --nx-maxw:none;
  --nx-font-head:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nx-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,4.5vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--nx-font-body);font-size:16px;line-height:1.5;color:var(--nx-ink);background:var(--nx-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:3px solid var(--nx-gold);outline-offset:2px;border-radius:var(--nx-radius)}
.wrap{max-width:var(--nx-maxw);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4{font-family:var(--nx-font-head);font-weight:500;letter-spacing:-.025em}
h1{font-size:clamp(42px,5.6vw,78px);line-height:1;letter-spacing:-.035em;font-weight:500}
h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08}
h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2vw,28px);line-height:1.4}
.label{display:inline-block;font-family:var(--nx-font-head);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:var(--nx-cream);color:var(--nx-bord);padding:5px 10px;border-radius:var(--nx-radius)}
.dark .label{background:rgba(255,255,255,.12);color:#fff}
section{padding:clamp(64px,9vw,120px) 0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--nx-font-head);font-weight:500;font-size:15px;line-height:1.2;padding:14px 24px;border-radius:var(--nx-radius);border:0;cursor:pointer;transition:background .2s,color .2s,transform .2s,translate .25s cubic-bezier(.2,.8,.2,1)}
.btn-p{background:var(--nx-red);color:#fff}
.btn-p:hover{background:var(--nx-bord)}
.btn-s{background:var(--nx-cream);color:var(--nx-red)}
.btn-s:hover{background:#EBD9B8}
.btn-g{background:var(--nx-gold);color:var(--nx-bord-d)}
.btn-g:hover{background:var(--nx-gold-l)}
.tlink{font-family:var(--nx-font-head);font-weight:500;font-size:14px;color:var(--nx-red);border-bottom:1.5px solid currentColor;padding-bottom:1px;display:inline-block}
.tlink:hover{color:var(--nx-bord)}

/* header */
header.hd{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--nx-line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--nx-font-head);font-weight:700;font-size:24px;letter-spacing:-.04em;color:var(--nx-red)}
.logo svg{width:34px;height:34px}
nav.mn ul{display:flex;gap:6px}
nav.mn>ul>li{position:relative}
nav.mn a.t,nav.mn button.t{display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:var(--nx-font-head);font-weight:500;font-size:15px;padding:10px 14px;border-radius:var(--nx-radius);color:var(--nx-ink)}
nav.mn .t:hover,nav.mn li:hover>.t,nav.mn li:focus-within>.t{color:var(--nx-red)}
nav.mn .t i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);display:block}
.dd{position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);box-shadow:0 20px 40px -16px rgba(42,27,28,.25);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
li:hover>.dd,li:focus-within>.dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:10px 12px;border-radius:var(--nx-radius);font-size:15px}
.dd a:hover{background:var(--nx-paper);color:var(--nx-red)}
.hd-r{display:flex;align-items:center;gap:20px}
.hd-tel{font-size:13px;line-height:1.25;text-align:right}
.hd-tel small{display:block;font-family:var(--nx-font-head);font-size:11px;color:var(--nx-mute);font-weight:500}
.hd-tel b{font-family:var(--nx-font-head);font-weight:500;font-size:16px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--nx-line);background:#fff;border-radius:var(--nx-radius);cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--nx-ink);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.mob{display:none}

/* hero */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(40px,5vw,64px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{color:var(--nx-bord-d);margin-bottom:28px}
.hero h1 em{font-style:normal;color:var(--nx-red)}
.hero .lead{max-width:560px;margin-bottom:36px;color:var(--nx-ink)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:1.28;background:var(--nx-bord);clip-path:polygon(0 100%,24% 0,100% 0,100% 100%);border-radius:var(--nx-radius);overflow:hidden}
.hero-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px}
.hero-art::after{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(245,233,212,.45),transparent 70%)}
.mock{position:absolute;left:30%;right:6%;top:12%;bottom:-4%;background:var(--nx-paper);border-radius:8px 8px 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);overflow:hidden;color:var(--nx-ink);z-index:1}
.mock .bar{display:flex;gap:6px;padding:10px 12px;background:#EBDDBF;border-bottom:1px solid #DCCFB4}
.mock .bar b{width:9px;height:9px;border-radius:50%;display:block}
.mock .in{padding:14px;display:grid;gap:10px}
.mock .k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock .k div{background:#fff;border:1px solid var(--nx-line);border-radius:6px;padding:8px 10px}
.mock .k small{display:block;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-mute)}
.mock .k strong{font-family:var(--nx-font-head);font-size:17px;font-weight:600;letter-spacing:-.02em}
.mock .ch{background:#fff;border:1px solid var(--nx-line);border-radius:6px;padding:10px;display:flex;align-items:flex-end;gap:6px;height:84px}
.mock .ch i{flex:1;background:var(--nx-line);border-radius:3px 3px 0 0;display:block;height:var(--h);transition:height 1s cubic-bezier(.2,.8,.2,1)}
.mock .ch i.r{background:var(--nx-red)}.mock .ch i.g{background:var(--nx-gold)}
.mock .li{background:#fff;border:1px solid var(--nx-line);border-radius:6px;padding:4px 10px}
.mock .li p{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;padding:6px 0;border-bottom:1px solid #F0ECE0;font-weight:500}
.mock .li p:last-child{border:0}
.mock .li p b{color:var(--nx-red);font-weight:600}
.badge-f{position:absolute;z-index:2;left:20%;bottom:12%;background:var(--nx-gold);color:var(--nx-bord-d);font-family:var(--nx-font-head);font-weight:600;font-size:13px;padding:10px 14px;border-radius:var(--nx-radius);display:flex;gap:8px;align-items:center;box-shadow:0 14px 24px -10px rgba(0,0,0,.45)}

/* metrics */
.metrics{border-top:1px solid var(--nx-line)}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:36px;padding-bottom:36px}
.mt{padding:0 24px;border-left:2px solid var(--nx-line)}
.mt:first-child{border-left:0;padding-left:0}
.mt b{font-family:var(--nx-font-head);font-weight:500;font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1;display:block;color:var(--nx-red)}
.mt b small{font-size:.55em;letter-spacing:0;margin-left:4px;color:var(--nx-ink)}
.mt>span{font-size:14px;color:var(--nx-mute);display:block;margin-top:8px}

/* dark intro */
.dark-blk{padding:0 0 clamp(64px,9vw,120px)}
.db{background:var(--nx-bord);color:#fff;border-radius:var(--nx-radius);min-height:clamp(360px,42vw,560px);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.db h2{font-weight:600;max-width:640px;position:relative;z-index:1}
.dots{position:absolute;right:6%;bottom:0;width:min(34vw,360px);aspect-ratio:1.1;background-image:radial-gradient(circle,var(--nx-gold) 3px,transparent 3.6px);background-size:30px 30px;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.9}
.db .gl{position:absolute;left:-10%;top:-30%;width:60%;aspect-ratio:1;background:radial-gradient(circle,rgba(90,20,24,.55),transparent 65%)}

/* benefits */
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.ben svg{width:56px;height:56px;margin-bottom:22px;stroke:var(--nx-red);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ben h3{margin-bottom:10px}
.ben p{font-size:14px;color:var(--nx-mute);max-width:260px}
.ben-foot{border-top:1px solid var(--nx-line);margin-top:56px;padding-top:28px}

/* solutions */
.sol{background:var(--nx-cream)}
.sol h2{margin:16px 0 40px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:var(--nx-radius);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{box-shadow:0 24px 40px -22px rgba(90,20,24,.45)}
.card .b{padding:28px 28px 24px;flex:1}
.card svg{width:44px;height:44px;margin-bottom:26px;stroke:var(--nx-red);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:12px}
.card p{font-size:14px;color:var(--nx-mute)}
.card .f{padding:18px 28px;border-top:1px solid var(--nx-line)}
.center{text-align:center;margin-top:40px}

/* industries */
.ind h2{margin:16px 0 36px;max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.chip{font-family:var(--nx-font-head);font-weight:500;font-size:15px;background:var(--nx-cream);padding:12px 22px;border-radius:99px;transition:.2s;cursor:default}
.chip:hover{background:var(--nx-red);color:#fff}

/* showcase */
.dark{background:var(--nx-bord);color:#fff}
.show h2{margin:16px 0 14px;font-weight:600}
.show .sub{color:rgba(255,255,255,.72);max-width:560px;margin-bottom:40px}
.sg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:32px;align-items:start}
.tabs{display:flex;flex-direction:column;gap:10px}
.tab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;text-align:left;padding:20px 22px;border-radius:var(--nx-radius);cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;transition:.2s}
.tab:hover{border-color:var(--nx-gold)}
.tab .n{font-family:var(--nx-font-head);font-weight:600;font-size:26px;color:var(--nx-gold);grid-row:span 2;letter-spacing:-.03em}
.tab b{font-family:var(--nx-font-head);font-weight:500;font-size:20px;letter-spacing:-.02em}
.tab small{font-size:13.5px;color:rgba(255,255,255,.65)}
.tab[aria-selected=true]{background:#fff;color:var(--nx-ink);border-color:#fff}
.tab[aria-selected=true] .n{color:var(--nx-red)}
.tab[aria-selected=true] small{color:var(--nx-mute)}
.panel{display:none;background:var(--nx-paper);color:var(--nx-ink);border-radius:var(--nx-radius);overflow:hidden;animation:pin .4s cubic-bezier(.2,.8,.2,1)}
.panel.on{display:block}
@keyframes pin{from{opacity:0;transform:translateY(12px)}}
.pbar{display:flex;align-items:center;gap:7px;background:#EBDDBF;padding:11px 14px;border-bottom:1px solid #DCCFB4}
.pbar b{width:10px;height:10px;border-radius:50%;display:block}
.pbar .u{margin-left:12px;background:#fff;border-radius:12px;height:22px;padding:0 12px;display:flex;align-items:center;font-size:11px;color:var(--nx-mute)}
.pb{padding:24px}
.pb h4{font-size:20px;margin-bottom:2px}
.pb .s{font-size:13px;color:var(--nx-mute);margin-bottom:18px}
.cal{display:grid;grid-template-columns:44px repeat(5,1fr);font-size:11px;border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden;background:#fff}
.cal>div{border-right:1px solid #F0ECE0;border-bottom:1px solid #F0ECE0;min-height:44px;padding:4px;position:relative}
.cal .dh{font-weight:600;background:var(--nx-cream);text-align:center;padding:9px 4px;min-height:0}
.cal .tm{color:var(--nx-mute);font-size:10px;font-weight:500}
.ev{position:absolute;left:4px;right:4px;top:4px;border-radius:3px;padding:5px 7px;font-weight:600;font-size:10.5px;line-height:1.2;color:#fff;background:var(--nx-red)}
.ev.g{background:var(--nx-gold);color:var(--nx-bord)}.ev.b{background:var(--nx-bord)}
.ev.t2{height:84px;z-index:1}.ev.t1{height:36px}
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--nx-line)}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--nx-mute);background:var(--nx-cream);padding:11px 14px;font-weight:600}
.tbl td{padding:13px 14px;border-top:1px solid #F0ECE0;font-weight:500}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.pill{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:99px;display:inline-block}
.pill.ok{background:#EBDDBF;color:#5A1418}.pill.op{background:var(--nx-gold-l);color:var(--nx-bord)}.pill.late{background:#EBDDBF;color:var(--nx-red-d)}
.total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;background:var(--nx-bord);color:#fff;border-radius:var(--nx-radius);padding:14px 18px}
.total span{font-size:12px;opacity:.75}.total strong{font-family:var(--nx-font-head);font-size:24px;font-weight:600;letter-spacing:-.02em}
.timer{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--nx-red);color:#fff;border-radius:var(--nx-radius);padding:22px 24px;flex-wrap:wrap}
.timer small{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:6px}
.timer .t{font-family:var(--nx-font-head);font-size:clamp(36px,5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1}
.stop{width:56px;height:56px;border-radius:50%;background:var(--nx-gold);display:grid;place-items:center;flex:none}
.stop i{width:18px;height:18px;border-radius:3px;background:var(--nx-bord);display:block}
.projs{display:grid;gap:10px;margin-top:14px}
.proj{background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:13px;font-weight:500}
.proj .bar2{grid-column:1/-1;height:6px;border-radius:3px;background:var(--nx-cream);overflow:hidden}
.proj .bar2 i{display:block;height:100%;background:var(--nx-red)}
.proj:nth-child(2) .bar2 i{background:var(--nx-gold)}.proj:nth-child(3) .bar2 i{background:var(--nx-bord)}
.plan{display:grid;grid-template-columns:104px repeat(5,1fr);gap:6px;font-size:11px;font-weight:600}
.plan .h{color:var(--nx-mute);text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:4px 0;text-align:center}
.plan .who{display:flex;align-items:center;gap:8px;font-size:12px}
.plan .who i{width:26px;height:26px;border-radius:50%;background:var(--nx-cream);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--nx-bord);flex:none}
.plan .s2{border-radius:3px;padding:9px 6px;text-align:center;color:#fff;background:var(--nx-red)}
.plan .m{background:var(--nx-gold);color:var(--nx-bord)}.plan .n{background:var(--nx-bord)}
.plan .off{background:transparent;border:1.5px dashed #CFC9B8;color:#A19B88}.plan .vac{background:var(--nx-cream);color:var(--nx-bord)}

/* branding */
.br h2{margin:16px 0 14px}
.br .sub{color:var(--nx-mute);max-width:600px;margin-bottom:40px}
.bg{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.bx{border-radius:var(--nx-radius);overflow:hidden;position:relative}
.b-logo{grid-column:span 7;background:var(--nx-bord);color:#fff;min-height:320px;display:flex;align-items:center;justify-content:center;gap:24px;padding:32px;flex-wrap:wrap}
.b-logo svg{width:clamp(80px,9vw,128px);height:auto}
.b-logo .wm{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(46px,6.4vw,92px);letter-spacing:-.045em;line-height:1}
.b-cards{grid-column:span 5;background:#EBDDBF;display:flex;align-items:center;justify-content:center;gap:22px;padding:32px 16px}
.bc{width:160px;height:280px;border-radius:3px;box-shadow:0 20px 30px -14px rgba(28,26,23,.55);padding:18px 14px;display:flex;flex-direction:column;justify-content:space-between;flex:none;transition:transform .35s}
.bc.f{background:var(--nx-bord);color:#fff;align-items:center;justify-content:center;gap:12px;transform:rotate(-5deg)}
.bc.f svg{width:46px;height:46px}.bc.f b{font-family:var(--nx-font-head);font-size:26px;font-weight:700;letter-spacing:-.04em}
.bc.k{background:#fff;transform:rotate(4deg)}
.bc.k .tp{display:flex;justify-content:space-between;gap:6px;align-items:flex-start}
.bc.k .tp svg{width:22px;height:22px;flex:none}
.bc.k .nm{font-family:var(--nx-font-head);font-weight:600;font-size:15px;line-height:1.1}
.bc.k .tt{font-size:10px;color:var(--nx-red);font-weight:600;margin-top:4px}
.bc.k .ct{font-size:9px;color:#3D3A36;display:grid;gap:4px}
.b-cards:hover .bc.f{transform:rotate(-8deg) translateY(-6px)}.b-cards:hover .bc.k{transform:rotate(7deg) translateY(-6px)}
.b-fly{grid-column:span 4;background:var(--nx-gold);color:var(--nx-bord-d);min-height:300px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.b-fly h3{font-size:clamp(32px,3.6vw,48px);font-weight:600;line-height:.98;letter-spacing:-.04em;text-transform:uppercase}
.b-fly .r{display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;font-weight:500}
.b-fly .r i{width:54px;height:54px;border-radius:50%;background:var(--nx-red);display:block}
.b-pal{grid-column:span 8;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--nx-line)}
.sw{padding:20px 16px;display:flex;flex-direction:column;justify-content:flex-end;min-height:200px}
.sw b{font-family:var(--nx-font-head);font-weight:600;font-size:15px}.sw span{font-size:11.5px;opacity:.75}
.bl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.bl div{border-top:2px solid var(--nx-ink);padding-top:14px}
.bl b{font-family:var(--nx-font-head);font-weight:500;font-size:19px;display:block;margin-bottom:6px;letter-spacing:-.015em}
.bl p{font-size:14px;color:var(--nx-mute)}

/* stories */
.st{background:var(--nx-paper)}
.st h2{margin:16px 0 14px}
.st .sub{color:var(--nx-mute);margin-bottom:40px;max-width:600px}
.sc{background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:20px;display:flex;flex-direction:column;gap:18px}
.sc .lg{height:170px;border-radius:var(--nx-radius);display:grid;place-items:center}
.sc .lg svg{width:68px;height:68px}
.sc .cat{font-family:var(--nx-font-head);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--nx-red)}
.sc h3{font-size:22px}
.sc p{font-size:14px;color:var(--nx-mute)}
.sc ul{display:grid;gap:6px;font-size:14px;font-weight:500}
.sc li::before{content:"\2713";color:var(--nx-red);margin-right:8px;font-weight:700}
.sc .tag{align-self:flex-start;font-size:11px;font-weight:600;background:var(--nx-cream);color:var(--nx-bord);padding:3px 8px;border-radius:var(--nx-radius)}

/* contact */
.ct h2{margin:16px 0 18px;max-width:560px}
.cg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:start}
.ct .intro{color:var(--nx-mute);max-width:480px;margin-bottom:22px}
.ct .tel{font-family:var(--nx-font-head);font-size:clamp(20px,2vw,26px);font-weight:500;margin-bottom:36px}
.ct .tel a{color:var(--nx-red)}
.ct h4{font-size:18px;margin-bottom:14px}
.vt{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.vt li{font-size:14px;font-weight:500;background:var(--nx-cream);padding:8px 14px;border-radius:99px}
.vt li::before{content:"\2713";color:var(--nx-red);margin-right:7px;font-weight:700}
.nx{display:grid;gap:14px;list-style:none}
.nx li{display:flex;gap:16px;align-items:center;font-size:16px;font-weight:500}
.nx b{font-family:var(--nx-font-head);width:36px;height:36px;border-radius:50%;background:var(--nx-red);color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
form.f{background:var(--nx-paper);border-radius:var(--nx-radius);padding:clamp(22px,3vw,40px);display:grid;gap:18px}
form.f h3{font-size:26px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl{display:flex;flex-direction:column;gap:7px}
.fl label{font-size:13px;font-weight:600}
.fl input,.fl select,.fl textarea{background:#fff;border:1px solid #2A1B1C33;border-radius:var(--nx-radius);padding:13px 14px;font-size:15px;width:100%;transition:border-color .15s}
.fl textarea{min-height:120px;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--nx-red);box-shadow:0 0 0 3px rgba(90,20,24,.15)}
.ck{display:flex;gap:10px;font-size:13px;color:var(--nx-mute);align-items:flex-start}
.ck input{margin-top:3px;accent-color:var(--nx-red);width:16px;height:16px;flex:none}
.ck a{color:var(--nx-red);border-bottom:1px solid currentColor}
#fn{font-size:13px;color:var(--nx-mute)}

/* footer */
footer{background:var(--nx-bord-d);color:#fff;padding:72px 0 28px}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer .logo{color:#fff}
footer p{opacity:.7;font-size:15px;margin:16px 0;max-width:300px}
footer h5{font-family:var(--nx-font-head);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--nx-gold);margin-bottom:14px;font-weight:600}
footer li a,footer .ad a{display:block;padding:5px 0;opacity:.82;font-size:15px}
footer li a:hover,footer .ad a:hover{opacity:1;color:var(--nx-gold)}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:22px;font-size:13px;opacity:.7}
.fb a{margin-left:16px}.fb a:hover{color:var(--nx-gold)}

/* reveal */
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ===== MOTION LAYER ===== */
/* preloader */
.pre{position:fixed;inset:0;z-index:200;background:var(--nx-red);display:grid;place-items:center;color:#fff;animation:preOut .9s cubic-bezier(.76,0,.24,1) 1.25s forwards}
.pre-in{display:flex;align-items:center;gap:14px;font-family:var(--nx-font-head);font-weight:700;font-size:clamp(34px,6vw,64px);letter-spacing:-.04em;animation:preIn .7s cubic-bezier(.2,.8,.2,1) both}
.pre-in svg{width:.9em;height:.9em;animation:spin 1.1s cubic-bezier(.7,0,.2,1) both}
.pre-bar{position:absolute;left:0;bottom:0;height:6px;background:var(--nx-gold);width:100%;transform-origin:left;animation:barIn 1.1s cubic-bezier(.7,0,.2,1) both}
@keyframes preIn{from{opacity:0;transform:translateY(30px) scale(.9)}}
@keyframes spin{from{transform:rotate(-180deg) scale(.4)}}
@keyframes barIn{from{transform:scaleX(0)}}
@keyframes preOut{to{transform:translateY(-101%);visibility:hidden}}

/* progress, cursor, toast, to-top */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--nx-gold),var(--nx-red));transform-origin:left;transform:scaleX(var(--sp,0));z-index:100}
.cur{position:fixed;left:0;top:0;width:38px;height:38px;translate:-50% -50%;border:1.5px solid var(--nx-red);border-radius:50%;pointer-events:none;z-index:150;opacity:0;transition:width .25s,height .25s,background .25s,opacity .3s,border-color .25s}
.cur.vis{opacity:1}
.cur.big{width:74px;height:74px;background:rgba(245,233,212,.3);border-color:var(--nx-gold)}
.cur.on-dark{border-color:var(--nx-gold)}
@media (hover:none),(pointer:coarse){.cur{display:none}}
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:180;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:var(--nx-ink);color:#fff;padding:12px 18px;border-radius:var(--nx-radius);font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;box-shadow:0 18px 30px -12px rgba(0,0,0,.45);animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both,toastOut .3s ease-in 2.7s forwards}
.toast::before{content:"\2713";background:var(--nx-gold);color:var(--nx-bord-d);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:170}
.totop{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;background:#fff;border:0;cursor:pointer;z-index:70;box-shadow:0 10px 24px -8px rgba(42,27,28,.4);display:grid;place-items:center;opacity:0;translate:0 20px;pointer-events:none;transition:opacity .3s,translate .3s,transform .2s}
.totop.on{opacity:1;translate:0 0;pointer-events:auto}
.totop:hover{transform:scale(1.08)}
.totop .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:3}

/* header */
.hd .wrap{transition:height .3s}
.hd.sm .wrap{height:62px}
.hd{transition:box-shadow .3s}
.hd.sm{box-shadow:0 10px 30px -18px rgba(42,27,28,.35)}
.kbtn{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:9px 12px;font-size:13px;color:var(--nx-mute);cursor:pointer;font-family:var(--nx-font-head);font-weight:500;transition:.2s}
.kbtn:hover{border-color:var(--nx-red);color:var(--nx-red)}
.kbtn kbd{font-family:inherit;font-size:11px;background:var(--nx-paper);padding:2px 6px;border-radius:3px;border:1px solid var(--nx-line)}
@media (max-width:1250px){.kbtn{display:none}}

/* hero text */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;transform:translateY(112%);animation:lnUp 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.45s + var(--i,0)*.12s)}
@keyframes lnUp{to{transform:none}}
.rot{display:inline-grid;color:var(--nx-red)}
.rot .w{grid-area:1/1;transform:translateY(105%);opacity:0;transition:transform .6s cubic-bezier(.7,0,.2,1),opacity .6s}
.rot .w.on{transform:none;opacity:1}
.rot .w.off{transform:translateY(-105%);opacity:0}
.mock{transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .3s ease-out}
.badge-f{animation:bob 4s ease-in-out infinite;transition:translate .35s ease-out}
@keyframes bob{50%{transform:translateY(-8px)}}

/* reveal via translate (frees transform for tilt) */
.rv{opacity:0;translate:0 32px;transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1),transform .25s ease-out,box-shadow .25s}
.rv.in{opacity:1;translate:0 0}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wd>span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.06s)}
.split.in .wd>span{transform:none}

/* marquee */
.mq{overflow:hidden;padding:clamp(20px,3vw,40px) 0;border-block:1px solid var(--nx-line);user-select:none;display:grid;gap:4px}
.mq-row{display:flex;white-space:nowrap;will-change:transform;width:max-content}
.mq-row span{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(48px,8.5vw,120px);line-height:1.05;letter-spacing:-.04em;color:var(--nx-red);padding-right:.5em;display:inline-flex;align-items:center;gap:.5em;transition:color .3s}
.mq-row span::after{content:"\2726";font-size:.4em;color:var(--nx-gold)}
.mq-row span:hover{color:var(--nx-bord)}
.mq-row.alt span{color:var(--nx-gold)}
.mq-row.alt span::after{color:var(--nx-red)}
.mq-row.alt span:hover{color:var(--nx-bord)}

/* canvas dots */
.dots-c{position:absolute;inset:0;width:100%;height:100%}

/* cards: tilt + spotlight + icon pop */
.card,.sc{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.card::before,.sc::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(90,20,24,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before,.sc:hover::before{opacity:1}
.card:hover svg{animation:wob .7s cubic-bezier(.2,.8,.2,1)}
@keyframes wob{30%{transform:rotate(-10deg) scale(1.12)}60%{transform:rotate(6deg) scale(1.06)}}
.chip:hover{transform:translateY(-3px) rotate(-1.5deg)}
.chip{transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}

/* live demo extras */
.cal>div.fr{cursor:pointer;transition:background .15s}
.cal>div.fr:hover,.cal>div.fr:focus-visible{background:var(--nx-cream)}
.cal>div.fr:hover::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:var(--nx-red);font-weight:700;font-size:18px}
.ev.new{background:var(--nx-red);cursor:pointer;animation:pop .4s cubic-bezier(.2,.8,.2,1);height:36px;z-index:2}
.ev.new:hover{background:var(--nx-red-d)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.hint{font-size:12.5px;color:var(--nx-mute);margin-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hint b{color:var(--nx-red);font-weight:600}
button.pill{cursor:pointer;border:0;font-family:inherit;transition:transform .2s,filter .2s}
button.pill:hover{transform:scale(1.08)}
.mini{font-family:var(--nx-font-head);font-weight:500;font-size:13px;background:var(--nx-red);color:#fff;border:0;padding:9px 14px;border-radius:var(--nx-radius);cursor:pointer;transition:background .2s}
.mini:hover{background:var(--nx-bord)}
.tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
tr.flash{animation:flash 1.2s}
@keyframes flash{from{background:var(--nx-gold-l)}}
button.stop{border:0;cursor:pointer;transition:transform .2s}
button.stop:hover{transform:scale(1.1)}
button.stop.paused i{width:0;height:0;border-radius:0;background:none;border-left:17px solid var(--nx-bord);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.plan .s2{cursor:pointer;user-select:none;transition:background .2s,transform .15s}
.plan .s2:active{transform:scale(.92)}
.warns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;min-height:28px}
.warns span{font-size:12px;font-weight:600;background:#EBDDBF;color:var(--nx-red-d);padding:5px 10px;border-radius:99px;animation:pop .3s both}
.warns span.okk{background:#EBDDBF;color:#5A1418}

/* process */
.proc{background:#fff}
.proc h2{margin:16px 0 56px}
.psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.psteps::before,.psteps::after{content:"";position:absolute;left:0;right:0;top:23px;height:3px;background:var(--nx-line)}
.psteps::after{background:var(--nx-red);transform-origin:left;transform:scaleX(var(--p,0))}
.ps{position:relative;padding-top:72px}
.ps .no{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid var(--nx-line);display:grid;place-items:center;font-family:var(--nx-font-head);font-weight:600;transition:.4s;z-index:1}
.ps.on .no{background:var(--nx-red);border-color:var(--nx-red);color:#fff;transform:scale(1.12)}
.ps h3{margin-bottom:8px}
.ps p{font-size:14px;color:var(--nx-mute);max-width:260px}

/* configurator */
.cfg h2{margin:16px 0 14px;font-weight:600}
.cfg .sub{color:rgba(255,255,255,.72);max-width:520px;margin-bottom:32px}
.cfg-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:start}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{font-family:var(--nx-font-head);font-weight:500;font-size:16px;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.3);padding:13px 20px;border-radius:99px;cursor:pointer;transition:.25s cubic-bezier(.2,.8,.2,1);display:inline-flex;gap:10px;align-items:center}
.opt::before{content:"+";font-size:18px;line-height:1;transition:transform .35s}
.opt:hover{border-color:var(--nx-gold);transform:translateY(-2px)}
.opt[aria-pressed=true]{background:var(--nx-gold);color:var(--nx-bord-d);border-color:var(--nx-gold)}
.opt[aria-pressed=true]::before{content:"\2713";transform:rotate(360deg)}
.sum{background:#fff;color:var(--nx-ink);border-radius:var(--nx-radius);padding:28px;position:sticky;top:100px}
.sum-h{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.ring{width:92px;height:92px;position:relative;flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:8}
.ring .bgc{stroke:var(--nx-cream)}
.ring .fgc{stroke:var(--nx-red);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--nx-font-head);font-size:28px;font-weight:600}
.sum h3{font-size:22px}
.sum small{color:var(--nx-mute);font-size:14px}
.sum ul{display:grid;gap:8px;margin-bottom:22px;min-height:84px;align-content:start}
.sum li{display:flex;gap:10px;align-items:center;font-weight:500;animation:liIn .4s cubic-bezier(.2,.8,.2,1) both;border-bottom:1px solid var(--nx-line);padding-bottom:8px}
.sum li::before{content:"\2713";color:var(--nx-red);font-weight:700}
.sum li.empty{color:var(--nx-mute);font-size:14px;border:0}
.sum li.empty::before{content:none}
@keyframes liIn{from{opacity:0;transform:translateX(-12px)}}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* palette */
.pl-ov{position:fixed;inset:0;background:rgba(42,27,28,.55);backdrop-filter:blur(4px);z-index:190;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.pl-ov.open{display:flex}
.pl-box{width:min(560px,92vw);background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);animation:pin .25s both}
.pl-box input{width:100%;border:0;border-bottom:1px solid var(--nx-line);padding:20px 22px;font-size:18px;outline:none;font-family:var(--nx-font-head)}
.pl-list{max-height:340px;overflow:auto;padding:8px}
.pl-list button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;padding:13px 14px;border-radius:var(--nx-radius);cursor:pointer;font-size:15px;font-weight:500}
.pl-list button[aria-selected=true]{background:var(--nx-cream);color:var(--nx-red)}
.pl-list small{color:var(--nx-mute);font-size:13px}

/* footer giant */
.giant{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(70px,23vw,900px);letter-spacing:-.06em;line-height:.85;color:rgba(245,233,212,.12);margin:48px 0 0 -.03em;white-space:nowrap;user-select:none;overflow:hidden;padding-bottom:.06em;transition:color .4s}
.giant span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.07s)}
.giant.in span{transform:none}
.giant:hover{color:rgba(245,233,212,.28)}

@media (max-width:900px){
  .psteps{grid-template-columns:1fr;gap:28px}
  .psteps::before,.psteps::after{left:23px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .psteps::after{transform-origin:top;transform:scaleY(var(--p,0))}
  .ps{padding:0 0 0 72px;min-height:48px}
  .cfg-g{grid-template-columns:1fr}
  .sum{position:static}
}
@media (prefers-reduced-motion:reduce){
  .pre{display:none}
  .ln>span,.wd>span,.giant span{transform:none!important;animation:none!important}
  .rot .w{transition:none}
  .rv{translate:none}
}

@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .ben{grid-template-columns:repeat(2,1fr)}
  .sg{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .tab{min-width:250px;scroll-snap-align:start}
  .b-logo,.b-cards,.b-fly,.b-pal{grid-column:span 12}
  .bl{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  nav.mn,.hd-tel,.hd-r .btn{display:none}
  .burger{display:grid}
  .mob{display:block;position:fixed;inset:77px 0 0 0;background:#fff;padding:12px var(--gut) 32px;overflow:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:59;visibility:hidden}
  .mob.open{transform:none;visibility:visible}
  .mob a{display:block;font-family:var(--nx-font-head);font-weight:500;font-size:26px;padding:16px 0;border-bottom:1px solid var(--nx-line);letter-spacing:-.02em}
  .mob .btn{display:inline-flex;margin-top:24px;font-size:16px;border-bottom:0;color:#fff;padding:14px 24px;letter-spacing:0}
  .hero-g{grid-template-columns:1fr}
  .hero-art{order:-1;aspect-ratio:1.5}
  .metrics .wrap{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .mt:nth-child(3){border-left:0;padding-left:0}
  .cg{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards,.ben,.bl{grid-template-columns:1fr}
  .r2{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr}
  .b-pal{grid-template-columns:repeat(2,1fr)}
  .bc{width:140px;height:240px}
  .mock{left:22%}
  .mock .k strong{font-size:14px}
  .cal{grid-template-columns:34px repeat(3,1fr)}.cal .hm{display:none}
  .plan{grid-template-columns:76px repeat(3,1fr)}.plan .hm{display:none}
  .tbl .hm{display:none}
  .pb{padding:16px}
  .btn{justify-content:center}
  .hero-btns{flex-direction:column}
  .b-cards{padding:24px 8px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}.rv{opacity:1}
}

/* ===== MEHRSEITEN-ERWEITERUNG ===== */
.skip{position:absolute;left:12px;top:-60px;background:var(--nx-red);color:#fff;padding:10px 16px;border-radius:var(--nx-radius);z-index:300;font-weight:600}
.skip:focus{top:12px}
body.sub .ln>span{animation-delay:calc(.1s + var(--i,0)*.1s)}
nav.mn a.t[aria-current=page]{color:var(--nx-red);box-shadow:inset 0 -2px 0 var(--nx-red);border-radius:0}
.dd a[aria-current=page]{color:var(--nx-red);background:var(--nx-paper)}
.mob .subs{display:grid;border-bottom:1px solid var(--nx-line);padding-bottom:10px}
.mob .subs a{font-size:18px;padding:9px 0 9px 16px;border:0;color:var(--nx-mute)}
.mob a[aria-current=page]{color:var(--nx-red)}

/* Seiten-Kopf */
.ph{background:var(--nx-paper);padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px);overflow:hidden}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--nx-mute);margin-bottom:28px;font-weight:500}
.crumbs a{color:var(--nx-mute);transition:color .2s}
.crumbs a:hover{color:var(--nx-red)}
.crumbs li{display:flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs [aria-current]{color:var(--nx-ink)}
.ph-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.pg-h1{font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em;margin:18px 0 22px;color:var(--nx-bord-d)}
.pg-lead{font-size:clamp(17px,1.7vw,22px);line-height:1.5;color:#4A4742;max-width:620px;margin-bottom:32px}
.ph-btns{display:flex;gap:12px;flex-wrap:wrap}
.ph-art{position:relative;aspect-ratio:1.2;background:var(--nx-bord);border-radius:var(--nx-radius);overflow:hidden;display:grid;place-items:center}
.ph-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(245,233,212,.55) 2.4px,transparent 3px);background-size:28px 28px;-webkit-mask-image:linear-gradient(135deg,transparent 35%,#000);mask-image:linear-gradient(135deg,transparent 35%,#000)}
.ph-art::after{content:"";position:absolute;left:-20%;top:-30%;width:70%;aspect-ratio:1;background:radial-gradient(circle,rgba(90,20,24,.7),transparent 65%)}
.ph-art .big{position:relative;z-index:1;width:42%;aspect-ratio:1;stroke:var(--nx-gold);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:bob 5s ease-in-out infinite}
.ph-art .tags{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.ph-art .tags span{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:500;backdrop-filter:blur(4px)}

/* Intro / Zweispalter */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.two h2{margin:16px 0 20px}
.two p{color:#4A4742;margin-bottom:16px;max-width:560px}
.ticks{display:grid;gap:12px;margin-top:8px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.ticks li::before{content:"\2713";flex:none;width:24px;height:24px;border-radius:50%;background:var(--nx-red);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.sec-t{margin-bottom:44px;max-width:760px}
.sec-t h2{margin:16px 0 14px}
.sec-t p{color:#4A4742;font-size:18px}
.alt-bg{background:var(--nx-paper)}

/* Funktionen-Raster */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--nx-line);border-left:1px solid var(--nx-line)}
.fe{padding:32px 28px 30px;border-right:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);background:#fff;transition:background .25s}
.fe:hover{background:var(--nx-cream)}
.fe .n{font-family:var(--nx-font-head);font-weight:600;font-size:14px;color:var(--nx-red);letter-spacing:1px;display:block;margin-bottom:22px}
.fe h3{margin-bottom:10px;font-size:22px}
.fe p{font-size:15px;color:var(--nx-mute)}

/* Demo-Rahmen auf Unterseiten */
.demo{max-width:980px;margin:0 auto}
.demo .panel{display:block;animation:none;box-shadow:0 30px 60px -30px rgba(42,27,28,.4);border:1px solid var(--nx-line)}

/* FAQ */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--nx-line)}
.faq details:first-child{border-top:1px solid var(--nx-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.015em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--nx-red)}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:20px;line-height:1;transition:transform .3s,background .2s,color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--nx-red);border-color:var(--nx-red);color:#fff}
.faq details p{padding:0 54px 26px 0;color:#4A4742;max-width:720px;animation:pin .4s both}

/* CTA-Band */
.cta{background:var(--nx-red);color:#fff;border-radius:var(--nx-radius);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-8%;top:-60%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(245,233,212,.45),transparent 65%)}
.cta h2{font-weight:600;margin:0 0 12px;font-size:clamp(30px,3.6vw,48px)}
.cta p{color:rgba(255,255,255,.85);max-width:520px}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.cta .btn-s{background:rgba(255,255,255,.14);color:#fff}
.cta .btn-s:hover{background:rgba(255,255,255,.24)}
.cta-s{padding-top:0}

/* Portal-Karten (Start) */
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pt{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:360px;padding:32px;border-radius:var(--nx-radius);background:var(--nx-bord);color:#fff;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.pt:nth-child(2){background:var(--nx-red)}
.pt:nth-child(3){background:var(--nx-gold);color:var(--nx-bord-d)}
.pt::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%);opacity:0;transition:opacity .3s}
.pt:hover::before{opacity:1}
.pt .n{font-family:var(--nx-font-head);font-weight:600;font-size:14px;letter-spacing:1px;opacity:.75}
.pt h3{font-size:clamp(28px,2.8vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:auto 0 12px;padding-top:60px}
.pt p{opacity:.85;font-size:15px;max-width:320px}
.pt .go{margin-top:22px;width:48px;height:48px;border-radius:50%;background:currentColor;display:grid;place-items:center;transition:transform .3s}
.pt .go svg{width:20px;height:20px;color:var(--nx-bord)}
.pt:nth-child(2) .go svg{color:var(--nx-red)}
.pt:nth-child(3) .go svg{color:var(--nx-gold)}
.pt:hover .go{transform:translateX(8px)}

/* Leistungs-Uebersicht (Zeilen) */
.svr{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.1fr) auto;gap:32px;align-items:start;padding:40px 0;border-top:1px solid var(--nx-line);transition:background .3s,padding .3s}
.svr:last-child{border-bottom:1px solid var(--nx-line)}
.svr:hover{background:var(--nx-paper);padding-left:20px;padding-right:20px}
.svr .n{font-family:var(--nx-font-head);font-weight:600;color:var(--nx-red);font-size:15px;letter-spacing:1px;padding-top:8px}
.svr h3{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.svr p{color:#4A4742;margin-bottom:14px}
.svr ul{display:flex;flex-wrap:wrap;gap:8px}
.svr li{font-size:13px;font-weight:500;background:var(--nx-cream);padding:5px 12px;border-radius:99px}
.svr .go{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--nx-ink);display:grid;place-items:center;transition:.3s}
.svr:hover .go{background:var(--nx-red);border-color:var(--nx-red);color:#fff;transform:rotate(-45deg)}
.svr .go svg{width:20px;height:20px}

/* Referenzen */
.flts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:36px}
.flt{font-family:var(--nx-font-head);font-weight:500;font-size:15px;background:#fff;border:1.5px solid var(--nx-line);padding:10px 20px;border-radius:99px;cursor:pointer;transition:.2s}
.flt:hover{border-color:var(--nx-red);color:var(--nx-red)}
.flt[aria-pressed=true]{background:var(--nx-red);border-color:var(--nx-red);color:#fff}
#fcount{margin-left:auto;font-size:14px;color:var(--nx-mute)}
.sc.hide{display:none}
.sc.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
.cards.four{grid-template-columns:repeat(3,1fr)}

/* Kontakt */
.cinfo{display:grid;gap:14px;margin:30px 0 40px}
.cinfo a{display:flex;align-items:center;gap:14px;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;width:fit-content;transition:color .2s}
.cinfo a:hover{color:var(--nx-red)}
.cinfo i{width:46px;height:46px;border-radius:var(--nx-radius);background:var(--nx-red);display:grid;place-items:center;flex:none}
.cinfo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Rechtliches */
.legal{max-width:820px}
.legal h2{font-size:clamp(24px,2.4vw,32px);margin:44px 0 12px;letter-spacing:-.02em}
.legal h3{font-size:19px;margin:24px 0 8px}
.legal p,.legal li{color:#3D3A36;margin-bottom:10px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.legal a{color:var(--nx-red);border-bottom:1px solid currentColor}
.note{background:var(--nx-cream);border-left:4px solid var(--nx-red);padding:16px 20px;border-radius:var(--nx-radius);font-size:14.5px;margin-bottom:32px}
.ph.min{padding-bottom:44px}
.ph.min .pg-h1{margin-bottom:0}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.nf b{display:block;font-family:var(--nx-font-head);font-weight:700;font-size:clamp(120px,24vw,300px);line-height:.85;letter-spacing:-.06em;color:var(--nx-red)}

@media (max-width:1100px){
  .ph-g,.two{grid-template-columns:1fr}
  .ph-art{aspect-ratio:1.5;order:-1}
  .feat{grid-template-columns:repeat(2,1fr)}
  .pts{grid-template-columns:1fr}
  .pt{min-height:280px}
  .svr{grid-template-columns:60px 1fr auto;gap:20px}
  .svr>div:nth-child(3){grid-column:2/3;grid-row:2}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .feat{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr}
  .svr{grid-template-columns:1fr auto;padding:28px 0}
  .svr .n{grid-column:1/-1;padding:0}
  .svr>div:nth-child(3){grid-column:1/-1;grid-row:auto}
  .faq details p{padding-right:0}
  #fcount{margin-left:0;width:100%}
  .cta .btns .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.ph-art .big{animation:none}}

/* ===== PALETTE LOCK: Weiss, Beige, Dunkelrot (#5A1418 aus dem Logo-Hintergrund) =====
   Alte 4-Farben-Version: _archive/style-4farben.css */
:root{--nx-paper:#F5E9D4;--nx-cream:#F5E9D4;--nx-gold:#F5E9D4;--nx-gold-l:#EADAB9;--nx-red:#5A1418;--nx-red-d:#3E0D10;--nx-line:#E4D6BA}
.prog{background:var(--nx-bord)}
.cur{border-color:var(--nx-bord)}
.cur.big{background:rgba(90,20,24,.08);border-color:var(--nx-bord)}
.cur.on-dark,.cur.big.on-dark{border-color:var(--nx-cream)}
.cur.big.on-dark{background:rgba(245,233,212,.16)}
.pbar,.mock .bar{background:#EBDDBF}
.pbar b,.mock .bar b{background:rgba(90,20,24,.35)}
.pbar .u{background:#fff}
.gl{background:radial-gradient(circle,rgba(245,233,212,.16),transparent 65%)}
.ph-art::after{background:radial-gradient(circle,rgba(245,233,212,.16),transparent 65%)}
.hero-art::after{background:radial-gradient(circle,rgba(245,233,212,.25),transparent 70%)}
.cta::before{background:radial-gradient(circle,rgba(245,233,212,.2),transparent 65%)}
.badge-f{background:var(--nx-cream);border:2px solid var(--nx-bord)}
.label{background:var(--nx-cream)}
.ph .label,.alt-bg .label,.sol .label,.st .label{background:#fff}
.hero h1 em,.rot .w{background:linear-gradient(transparent 62%,var(--nx-cream) 62%)}
.hero h1,.pg-h1{color:var(--nx-ink)}
.rot,.hero h1 em{color:var(--nx-bord)}
.mock .ch i.r{background:var(--nx-bord)}
.mock .ch i.g{background:rgba(90,20,24,.5)}
.ev.g{background:#fff;color:var(--nx-bord);box-shadow:inset 0 0 0 1.5px var(--nx-bord)}
.ev.b{background:#EBDDBF;color:var(--nx-bord)}
.pill.ok{background:#EBDDBF;color:var(--nx-bord)}
.pill.op{background:#fff;color:var(--nx-bord);box-shadow:inset 0 0 0 1.5px var(--nx-bord)}
.pill.late{background:var(--nx-bord);color:#fff}
.warns span{background:var(--nx-bord);color:#fff}
.warns span.okk{background:#EBDDBF;color:var(--nx-bord)}
.stop{background:var(--nx-cream)}
.proj .bar2{background:var(--nx-cream)}
.proj .bar2 i{background:var(--nx-bord)}
.proj:nth-child(2) .bar2 i{background:rgba(90,20,24,.6)}
.proj:nth-child(3) .bar2 i{background:rgba(90,20,24,.35)}
.plan .s2{background:var(--nx-bord);color:#fff;border:1.5px solid transparent}
.plan .m{background:#fff;color:var(--nx-bord);border-color:var(--nx-bord)}
.plan .n{background:var(--nx-bord);color:#fff}
.plan .vac{background:#EBDDBF;color:var(--nx-bord)}
.plan .off{background:transparent;border:1.5px dashed rgba(90,20,24,.35);color:rgba(90,20,24,.55)}
.plan .who i{background:#fff}
.svr:hover li{background:#fff}
.pt{background:var(--nx-bord);color:#fff}
.pt:nth-child(2){background:var(--nx-cream);color:var(--nx-bord-d)}
.pt:nth-child(3){background:#fff;color:var(--nx-bord-d);box-shadow:inset 0 0 0 2px var(--nx-bord)}
.pt .go{background:#fff}
.pt .go svg{color:var(--nx-bord)}
.pt:nth-child(2) .go,.pt:nth-child(3) .go{background:var(--nx-bord)}
.pt:nth-child(2) .go svg,.pt:nth-child(3) .go svg{color:#fff}
.pt:nth-child(2)::before,.pt:nth-child(3)::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(90,20,24,.07),transparent 60%)}
.b-pal{grid-template-columns:repeat(3,1fr)}
.b-pal .sw:last-child{box-shadow:inset 1px 0 0 var(--nx-line)}
.opt[aria-pressed=true]{background:var(--nx-cream);color:var(--nx-bord-d)}
.toast::before{background:var(--nx-cream);color:var(--nx-bord-d)}
.tbl th{background:var(--nx-cream)}

/* Icon: beiges Quadrat mit rotem N (#A8262B), auf Weiss mit feiner Kontur */
.hd .logo svg,.bc.k svg{border-radius:26%;box-shadow:0 0 0 1.5px rgba(90,20,24,.16)}

/* ===== Dunkler Block: Klick oeffnet die 4 Vorteile unten ===== */
.db{--dbp:clamp(20px,3vw,32px);padding:var(--dbp);cursor:pointer}
.db-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
.db-btn{display:inline-flex;align-items:center;gap:12px;background:var(--nx-cream);color:var(--nx-bord-d);border:0;border-radius:var(--nx-radius);padding:14px 20px;font-family:var(--nx-font-head);font-weight:500;font-size:15px;cursor:pointer;transition:background .2s,transform .2s}
.db-btn:hover{background:var(--nx-gold-l)}
.db-btn .pm{width:20px;height:20px;position:relative;display:inline-block}
.db-btn .pm::before,.db-btn .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;translate:-50% -50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.db-btn .pm::after{transform:rotate(90deg)}
.db.open .db-btn .pm::after{transform:rotate(0)}
.db-panel{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);background:var(--nx-cream);color:var(--nx-bord-d);margin:0 calc(-1*var(--dbp)) calc(-1*var(--dbp));max-height:0;overflow:hidden;cursor:default;transition:max-height .8s cubic-bezier(.2,.8,.2,1),margin-top .8s cubic-bezier(.2,.8,.2,1)}
.db.open .db-panel{max-height:560px;margin-top:28px}
.bi{padding:32px clamp(18px,2.4vw,32px) 36px;border-right:1px solid rgba(90,20,24,.15);opacity:0;transform:translateY(30px) scale(.96);transition:opacity .4s,transform .4s}
.bi:last-child{border-right:0}
.db.open .bi{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.25s + var(--i)*.09s)}
.bi svg{width:48px;height:48px;margin-bottom:18px;stroke:var(--nx-bord);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bi h3{margin-bottom:8px;font-size:21px}
.bi p{font-size:14px;color:#4A4742}
@media (max-width:900px){
  .db-panel{grid-template-columns:repeat(2,1fr)}
  .db.open .db-panel{max-height:800px}
  .bi:nth-child(2){border-right:0}
  .bi:nth-child(-n+2){border-bottom:1px solid rgba(90,20,24,.15)}
}
@media (max-width:560px){
  .db-panel{grid-template-columns:1fr}
  .db.open .db-panel{max-height:1100px}
  .bi{border-right:0;border-bottom:1px solid rgba(90,20,24,.15)}
  .bi:last-child{border-bottom:0}
  .db-btn{width:100%;justify-content:space-between}
}
.db{justify-content:flex-start}
.db-row{margin-top:auto}

/* ===== ABLAUF: Scroll-Szene ===== */
.scene.proc{background:var(--nx-bord);color:#fff;height:440vh;padding:0;position:relative}
.scene .pin{position:sticky;top:76px;height:calc(100vh - 76px);display:flex;flex-direction:column;overflow:hidden}
.scene .pin>.wrap{display:flex;flex-direction:column;height:100%;padding-top:clamp(16px,3.4vh,44px);padding-bottom:clamp(16px,3vh,36px)}
.scene .label{background:rgba(255,255,255,.12);color:#fff}
.scene h2{margin:clamp(6px,1.4vh,14px) 0 0;font-weight:600;font-size:clamp(30px,2.2vw + 2.2vh,64px)}
.sc-nav{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(14px,3vh,34px) 0 0;list-style:none;padding:0}
.sc-nav::before,.sc-nav::after{content:"";position:absolute;left:20px;right:0;top:20px;height:3px;background:rgba(255,255,255,.2)}
.sc-nav::after{background:var(--nx-cream);right:auto;width:calc((100% - 20px) * var(--p,0));transition:width .15s linear}
.sn{position:relative;z-index:1;background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(13px,1vw + .4vh,17px);text-align:left;padding:0}
.sn .no{width:42px;height:42px;border-radius:50%;background:var(--nx-bord);border:3px solid rgba(255,255,255,.3);display:grid;place-items:center;font-weight:600;transition:.4s cubic-bezier(.2,.8,.2,1)}
.sn .lb{opacity:.6;transition:opacity .3s}
.sn.on .no{background:var(--nx-cream);border-color:var(--nx-cream);color:var(--nx-bord);transform:scale(1.12)}
.sn.on .lb,.sn:hover .lb{opacity:1}
.sc-stage{position:relative;flex:1;min-height:0;margin-top:clamp(10px,2vh,28px)}
.sc-i{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,110px);align-items:center;opacity:0;visibility:hidden;transform:translateY(7%);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
.sc-i.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .15s,transform .9s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s}
.sc-i.past{transform:translateY(-7%)}
.sc-l{min-width:0}
.sc-l .big{display:block;font-family:var(--nx-font-head);font-weight:700;font-size:clamp(90px,26vh,300px);line-height:.8;letter-spacing:-.06em;color:var(--nx-cream);margin-bottom:clamp(8px,2vh,22px);transform-origin:left bottom}
.sc-i.on .big{animation:numIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes numIn{from{transform:translateY(40px) scale(.9);opacity:0}}
.sc-l h3{font-size:clamp(28px,1.6vw + 2vh,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.sc-l p{color:rgba(255,255,255,.82);font-size:clamp(15px,.5vw + 1vh,19px);max-width:520px;margin-bottom:clamp(10px,2vh,22px)}
.scene .ticks li{color:#fff;font-size:clamp(14px,.4vw + .9vh,17px)}
.scene .ticks{gap:clamp(6px,1.2vh,12px)}
.scene .ticks li::before{background:var(--nx-cream);color:var(--nx-bord)}
.sc-r{min-width:0;display:flex;justify-content:center;align-items:center;height:100%}
.vz{width:100%;max-width:640px;height:min(100%,clamp(280px,52vh,500px));background:var(--nx-cream);color:var(--nx-bord-d);border-radius:var(--nx-radius);padding:clamp(16px,2.2vw,32px);position:relative;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}

/* Visual 1: Chat */
.chat{display:flex;flex-direction:column;gap:12px;justify-content:center}
.bub{max-width:78%;padding:13px 17px;border-radius:14px;font-size:clamp(13px,.5vw + .9vh,16px);font-weight:500;line-height:1.35}
.bub.them{background:#fff;align-self:flex-start;border-bottom-left-radius:4px}
.bub.us{background:var(--nx-bord);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.sc-i.on .bub{animation:bubIn .55s cubic-bezier(.2,.8,.2,1) both}
.sc-i.on .bub:nth-child(1){animation-delay:.5s}.sc-i.on .bub:nth-child(2){animation-delay:1.4s}.sc-i.on .bub:nth-child(3){animation-delay:2.3s}.sc-i.on .bub:nth-child(4){animation-delay:3.2s}
@keyframes bubIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
.typing{display:flex;gap:5px;align-self:flex-start;padding:10px 14px;background:#fff;border-radius:14px;width:fit-content}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--nx-bord);opacity:.35;animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes dot{40%{opacity:1;transform:translateY(-4px)}}

/* Visual 2: Wireframe */
.wf{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr 1fr auto auto;gap:12px}
.wf .b{background:#fff;border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(90,20,24,.18)}
.wf .b1{grid-column:1/-1;height:34px;background:var(--nx-bord)}
.wf .b2{grid-row:2/4}
.wf .b3,.wf .b4,.wf .b5,.wf .b6{min-height:50px}
.wf .b7{grid-column:2/-1;background:repeating-linear-gradient(90deg,rgba(90,20,24,.15) 0 14px,transparent 14px 22px);height:34px}
.wf .stamp{grid-column:1/-1;justify-self:end;font-family:var(--nx-font-head);font-weight:600;background:var(--nx-bord);color:#fff;padding:9px 16px;border-radius:99px;font-size:14px}
.sc-i.on .wf .b,.sc-i.on .wf .stamp{animation:blk .55s cubic-bezier(.2,.8,.2,1) both}
.sc-i.on .wf .b1{animation-delay:.4s}.sc-i.on .wf .b2{animation-delay:.6s}.sc-i.on .wf .b3{animation-delay:.8s}.sc-i.on .wf .b4{animation-delay:.95s}.sc-i.on .wf .b5{animation-delay:1.1s}.sc-i.on .wf .b6{animation-delay:1.25s}.sc-i.on .wf .b7{animation-delay:1.4s}.sc-i.on .wf .stamp{animation-delay:2.1s;animation-name:stampIn}
@keyframes blk{from{opacity:0;transform:scale(.7)}}
@keyframes stampIn{from{opacity:0;transform:scale(2) rotate(-8deg)}to{opacity:1;transform:none}}

/* Visual 3: Umsetzung */
.bld{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,28px)}
.bld .row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(14px,.5vw + 1vh,18px)}
.bld .row em{font-style:normal;font-weight:600}
.bld .trk{grid-column:1/-1;height:12px;border-radius:6px;background:#fff;overflow:hidden}
.bld .fill{display:block;height:100%;width:var(--w);background:var(--nx-bord);border-radius:6px}
.sc-i.on .bld .fill{animation:fillB 1.8s cubic-bezier(.2,.8,.2,1) both}
.sc-i.on .bld .row:nth-child(2) .fill{animation-delay:.5s}.sc-i.on .bld .row:nth-child(3) .fill{animation-delay:1s}
@keyframes fillB{from{width:0}}
.pillx{align-self:flex-start;font-weight:600;font-size:14px;background:#fff;color:var(--nx-bord);padding:9px 16px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--nx-bord)}
.sc-i.on .pillx{animation:blk .5s 2.2s both}

/* Visual 4: Livegang */
.live{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,28px)}
.lv{align-self:flex-start;display:flex;align-items:center;gap:12px;font-family:var(--nx-font-head);font-weight:700;font-size:clamp(34px,5vh,60px);letter-spacing:-.03em;color:var(--nx-bord)}
.lv i{width:.38em;height:.38em;border-radius:50%;background:var(--nx-bord);box-shadow:0 0 0 0 rgba(90,20,24,.5);animation:pulse2 1.8s infinite}
@keyframes pulse2{70%{box-shadow:0 0 0 18px rgba(90,20,24,0)}100%{box-shadow:0 0 0 0 rgba(90,20,24,0)}}
.live ul{display:grid;gap:12px;list-style:none}
.live li{display:flex;align-items:center;gap:14px;background:#fff;border-radius:6px;padding:14px 18px;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(15px,.5vw + 1vh,19px)}
.live li::before{content:"\2713";width:28px;height:28px;border-radius:50%;background:var(--nx-bord);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.sc-i.on .live li{animation:blk .5s cubic-bezier(.2,.8,.2,1) both}
.sc-i.on .live li:nth-child(1){animation-delay:.5s}.sc-i.on .live li:nth-child(2){animation-delay:1s}.sc-i.on .live li:nth-child(3){animation-delay:1.5s}

/* Fallback ohne Pin (Handy, niedrige Fenster) */
@media (max-width:900px),(max-height:620px){
  .scene.proc{height:auto;padding:clamp(56px,9vw,96px) 0}
  .scene .pin{position:static;height:auto;overflow:visible}
  .scene .pin>.wrap{height:auto;padding-top:0;padding-bottom:0}
  .sc-nav{display:none}
  .sc-stage{display:grid;gap:64px;margin-top:36px}
  .sc-i{position:static;opacity:1;visibility:visible;transform:none;grid-template-columns:1fr;gap:28px}
  .sc-l .big{font-size:clamp(90px,26vw,160px)}
  .vz{height:auto;min-height:280px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.sc-i .big,.sc-i .bub,.sc-i .wf .b,.sc-i .wf .stamp,.sc-i .fill,.sc-i .pillx,.sc-i li{animation:none!important}}
.scene .pin>.wrap{width:100%}

/* CTA-Band: mehr Abstand zu den Nachbarbloecken und zwischen den Buttons */
.cta-s{padding:clamp(72px,9vw,140px) 0}
.cta .btns{gap:20px}

/* ===== Suchfeld im Header ===== */
.hs{position:relative;display:flex;align-items:center;width:clamp(200px,17vw,300px)}
.hs>svg{position:absolute;left:14px;width:18px;height:18px;stroke:var(--nx-bord);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.hs input{width:100%;height:46px;border:1.5px solid var(--nx-line);background:#fff;border-radius:var(--nx-radius);padding:0 70px 0 44px;font-size:15px;font-weight:500;font-family:var(--nx-font-body);color:var(--nx-ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.hs input::placeholder{color:var(--nx-mute);font-weight:400}
.hs input::-webkit-search-cancel-button{display:none}
.hs input:hover{border-color:rgba(90,20,24,.4)}
.hs input:focus{outline:none;border-color:var(--nx-bord);box-shadow:0 0 0 4px rgba(90,20,24,.12)}
.hs kbd{position:absolute;right:10px;font-family:inherit;font-size:11px;font-weight:600;background:var(--nx-cream);color:var(--nx-bord);padding:3px 7px;border-radius:3px;pointer-events:none}
.hs input:focus~kbd{opacity:0}
.hs-list{position:absolute;top:calc(100% + 8px);right:0;width:min(440px,92vw);background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);box-shadow:0 30px 60px -20px rgba(42,27,28,.35);padding:8px;max-height:min(420px,70vh);overflow:auto;display:none;z-index:80}
.hs-list.open{display:block;animation:pin .25s both}
.hs-list a{display:grid;gap:2px;padding:12px 14px;border-radius:var(--nx-radius)}
.hs-list a[aria-selected=true]{background:var(--nx-cream)}
.hs-list b,.pl-list span{font-family:var(--nx-font-head);font-weight:500;font-size:16px;letter-spacing:-.01em}
.hs-list small{color:var(--nx-mute);font-size:13px}
.hs-list mark,.pl-list mark{background:transparent;color:var(--nx-bord);font-weight:700;box-shadow:inset 0 -2px 0 rgba(90,20,24,.45)}
.hs-empty{padding:18px 14px;color:var(--nx-mute);font-size:14px}
.kbtn.kb-ic{display:none;width:46px;height:46px;padding:0;justify-content:center}
.kbtn.kb-ic svg{width:20px;height:20px;stroke:var(--nx-bord);fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:1400px){.hd-tel{display:none}}
@media (max-width:1100px){.hs{display:none}.kbtn.kb-ic{display:flex}}
.hd-tel b,.hd-r .btn{white-space:nowrap}
@media (max-width:1560px){.hd-tel{display:none}}

/* ===== Roter Block: Klick fuer Klick durch die Vorteile ===== */
.db{min-height:clamp(480px,46vw,640px);user-select:none}
.db-row{transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.db.stepping .db-row{opacity:0;transform:translateY(-36px);pointer-events:none}
.db-btn{position:absolute;right:var(--dbp);bottom:var(--dbp);z-index:4;gap:14px}
.db-btn .ar{display:inline-grid;transition:transform .3s}
.db-btn .ar svg{width:18px;height:18px}
.db-btn:hover .ar{transform:translateX(5px)}
.db-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.bs{position:absolute;inset:0;padding:var(--dbp);padding-bottom:calc(var(--dbp) + 84px);display:flex;flex-direction:column;justify-content:flex-end;opacity:0;visibility:hidden;transform:translateY(46px);transition:opacity .35s,transform .5s,visibility 0s .5s}
.bs.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform 1s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s}
.bs.out{opacity:0;visibility:visible;transform:translateY(-46px);transition:opacity .4s,transform .6s}
.bs svg{display:block;width:clamp(56px,6vw,88px);height:auto;margin-bottom:clamp(14px,2.4vh,26px);stroke:var(--nx-cream);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.bs svg *{stroke-dasharray:240;stroke-dashoffset:240}
.bs.on svg *{animation:drawS 1.3s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes drawS{to{stroke-dashoffset:0}}
.bs h3{position:relative;z-index:1;font-size:clamp(40px,6.4vw,104px);font-weight:700;letter-spacing:-.05em;line-height:.95;color:#fff;margin-bottom:clamp(12px,2vh,22px);max-width:90%}
.bs p{position:relative;z-index:1;font-size:clamp(16px,1.5vw,22px);color:rgba(255,255,255,.9);max-width:600px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.bs p.d{margin-top:10px;color:rgba(255,255,255,.65);font-size:clamp(14px,1.1vw,17px)}
.bs.on p{opacity:1;transform:none;transition-delay:.55s}
.bs.on p.d{transition-delay:.75s}
.bs .gn{position:absolute;right:var(--dbp);bottom:calc(var(--dbp) + 40px);font-family:var(--nx-font-head);font-weight:700;font-size:clamp(180px,34vw,500px);line-height:.8;letter-spacing:-.06em;color:rgba(245,233,212,.09);transform:translateX(50px) scale(.94);transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.bs.on .gn{transform:none}
.db-segs{position:absolute;left:var(--dbp);bottom:calc(var(--dbp) + 22px);z-index:3;display:flex;gap:8px;opacity:0;transition:opacity .5s}
.db.stepping .db-segs{opacity:1}
.db-segs i{position:relative;width:clamp(36px,5vw,72px);height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.db-segs i::after{content:"";position:absolute;inset:0;background:var(--nx-cream);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.db-segs i.on::after{transform:scaleX(1)}
@media (max-width:700px){
  .db{min-height:560px}
  .bs h3{font-size:clamp(38px,12vw,64px);max-width:100%}
  .bs .gn{font-size:180px;bottom:calc(var(--dbp) + 90px);opacity:.8}
  .db-btn{left:var(--dbp);justify-content:space-between}
  .db-segs{bottom:calc(var(--dbp) + 74px)}
  .bs{padding-bottom:calc(var(--dbp) + 100px)}
}
@media (prefers-reduced-motion:reduce){.bs svg *{stroke-dashoffset:0!important;animation:none!important}}
@media (max-width:700px){.bs .gn{color:rgba(245,233,212,.06);opacity:1}}

.cinfo .addr{display:flex;align-items:center;gap:14px;font-family:var(--nx-font-head);font-weight:500;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;line-height:1.25}
.cinfo .addr i{width:46px;height:46px;border-radius:var(--nx-radius);background:var(--nx-red);display:grid;place-items:center;flex:none}
footer .adr{display:block;padding:5px 0;opacity:.82;font-size:15px}

@media (max-width:1320px){nav.mn a.t{padding:10px 9px;font-size:14px}.hs{width:170px}}
#login h2{margin:16px 0 18px;max-width:560px}
#login .intro{color:var(--nx-mute);max-width:480px;margin-bottom:22px}

/* ===== Kundenportal: Produkt-Kacheln ===== */
.pps{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.pp{grid-column:span 2;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(320px,27vw,400px);padding:clamp(24px,2.4vw,36px);border-radius:var(--nx-radius);overflow:hidden;isolation:isolate;background:var(--nx-bord);color:#fff;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:box-shadow .3s,opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1),transform .25s ease-out}
.pp:nth-child(2),.pp:nth-child(4){background:var(--nx-cream);color:var(--nx-bord-d)}
.pp.feat{grid-column:span 4;background:var(--nx-bord-d);box-shadow:inset 0 0 0 2px rgba(245,233,212,.35)}
.pp:hover{box-shadow:0 36px 70px -28px rgba(90,20,24,.6)}
.pp.feat:hover{box-shadow:inset 0 0 0 2px rgba(245,233,212,.35),0 36px 70px -28px rgba(90,20,24,.6)}
.pp .shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);transform:translateX(-130%);transition:transform 1s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pp:hover .shine{transform:translateX(130%)}
.pp .gi{position:absolute;right:-9%;top:-8%;width:64%;z-index:-1;stroke:currentColor;fill:none;stroke-width:.8;opacity:.1;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s}
.pp:hover .gi{transform:rotate(-8deg) scale(1.08);opacity:.16}
.pp .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pp .ic{width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pp:nth-child(2) .ic,.pp:nth-child(4) .ic{background:var(--nx-bord)}
.pp .ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pp:nth-child(2) .ic svg,.pp:nth-child(4) .ic svg{stroke:var(--nx-cream)}
.pp:hover .ic{transform:rotate(-8deg) scale(1.08)}
.pp .chip2{font-family:var(--nx-font-head);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border-radius:99px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.85}
.pp .mid small{font-family:var(--nx-font-head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.pp h3{font-size:clamp(32px,3.2vw,52px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:6px 0 12px}
.pp p{font-size:15px;opacity:.88;max-width:340px}
.pp .mods{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}
.pp .mods li{font-size:13px;font-weight:500;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12)}
.pp .bot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.25);padding-top:18px}
.pp:nth-child(2) .bot,.pp:nth-child(4) .bot{border-top-color:rgba(90,20,24,.22)}
.pp .lnk{font-family:var(--nx-font-head);font-weight:600;font-size:16px}
.pp .go{width:48px;height:48px;border-radius:50%;background:var(--nx-cream);color:var(--nx-bord);display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.pp:nth-child(2) .go,.pp:nth-child(4) .go{background:var(--nx-bord);color:#fff}
.pp .go svg{width:20px;height:20px}
.pp:hover .go{transform:translateX(8px) scale(1.06)}
@media (max-width:1000px){.pps{grid-template-columns:repeat(2,1fr)}.pp,.pp.feat{grid-column:auto}.pp.feat{grid-column:1/-1}}
@media (max-width:640px){.pps{grid-template-columns:1fr}.pp,.pp.feat{grid-column:1/-1;min-height:300px}}

/* Anmelde-Seite */
.lg-box{max-width:560px;margin:0 auto;padding:clamp(8px,2vw,24px) 0}
.lg-box h2{margin:16px 0 14px}
.lg-box .intro{color:var(--nx-mute);margin-bottom:26px}
.lg-box form.f{margin-top:26px}
.lg-box .back{margin-top:22px}
.lg-box [hidden]{display:none}
.pp h3{font-size:clamp(28px,2.7vw,44px)}
.pp:not(.feat) p{min-height:3em}

/* ===== Hero: Laptop + Handy ===== */
.hero-art{container-type:inline-size}
.hero-art .mock.devs{left:30%;right:auto;top:10%;bottom:auto;width:66%;height:80%;background:none;box-shadow:none;border-radius:0;overflow:visible}
.lap{position:absolute;left:0;top:3%;width:92%;animation:lapFloat 8s ease-in-out infinite}
@keyframes lapFloat{50%{transform:translateY(-1cqw)}}
.l-screen{position:relative;background:#1c0a0b;border-radius:1.3cqw 1.3cqw .4cqw .4cqw;padding:.9cqw .9cqw 1.1cqw;box-shadow:0 0 0 .15cqw #3a2a2b,0 3.4cqw 5cqw -1cqw rgba(0,0,0,.55)}
.l-screen::before{content:"";position:absolute;top:.35cqw;left:50%;width:.5cqw;height:.5cqw;border-radius:50%;background:#3a2a2b;translate:-50% 0}
.l-in{background:var(--nx-paper);border-radius:.5cqw;overflow:hidden;aspect-ratio:1.62;display:grid;grid-template-rows:auto 1fr;font-size:1.45cqw;color:var(--nx-ink)}
.l-bar{display:flex;align-items:center;gap:.5cqw;background:#EBDDBF;padding:.7cqw 1cqw}
.l-bar b{width:.8cqw;height:.8cqw;border-radius:50%;background:rgba(90,20,24,.35);display:block}
.l-bar span{margin-left:.8cqw;background:#fff;border-radius:99px;padding:.25cqw 1.2cqw;font-size:1.1cqw;color:var(--nx-mute)}
.l-bar em{margin-left:auto;display:flex;align-items:center;gap:.5cqw;font-style:normal;font-weight:600;font-size:1.1cqw;color:var(--nx-bord)}
.l-bar em i{width:.8cqw;height:.8cqw;border-radius:50%;background:var(--nx-bord);animation:pulse2 1.8s infinite}
.l-body{display:grid;grid-template-columns:4.2cqw 1fr;min-height:0}
.l-side{background:var(--nx-bord);display:flex;flex-direction:column;align-items:center;gap:1cqw;padding-top:1.2cqw}
.l-side i{width:2cqw;height:2cqw;border-radius:.5cqw;background:rgba(255,255,255,.22);display:block}
.l-side i.on{background:var(--nx-cream)}
.l-main{padding:1.2cqw;display:grid;gap:1cqw;grid-template-rows:auto 1fr auto;min-height:0}
.l-k{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.l-k div{background:#fff;border-radius:.5cqw;padding:.7cqw .9cqw;box-shadow:inset 0 0 0 1px var(--nx-line)}
.l-k small{display:block;font-size:.95cqw;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-mute)}
.l-k strong{font-family:var(--nx-font-head);font-size:2.1cqw;font-weight:600;letter-spacing:-.02em}
.l-ch{background:#fff;border-radius:.5cqw;padding:.9cqw;display:flex;align-items:flex-end;gap:.7cqw;box-shadow:inset 0 0 0 1px var(--nx-line);min-height:0}
.l-ch i{flex:1;background:var(--nx-line);border-radius:.3cqw .3cqw 0 0;display:block;height:var(--h);transition:height 1s cubic-bezier(.2,.8,.2,1)}
.l-ch i.r{background:var(--nx-bord)}.l-ch i.g{background:rgba(90,20,24,.5)}
.l-li{background:#fff;border-radius:.5cqw;padding:.3cqw 1cqw;box-shadow:inset 0 0 0 1px var(--nx-line)}
.l-li p{display:flex;justify-content:space-between;font-size:1.15cqw;padding:.55cqw 0;border-bottom:1px solid #F0ECE0;font-weight:500}
.l-li p:last-child{border:0}
.l-li p b{color:var(--nx-bord);font-weight:600}
.l-base{position:relative;height:1.5cqw;width:112%;margin-left:-6%;background:linear-gradient(#d9ccb2,#b3a285);border-radius:0 0 1.6cqw 1.6cqw;box-shadow:0 2.4cqw 3cqw -.6cqw rgba(0,0,0,.5)}
.l-base::before{content:"";position:absolute;top:0;left:50%;width:14%;height:.55cqw;background:#9c8c70;border-radius:0 0 .8cqw .8cqw;translate:-50% 0}
.phn{position:absolute;right:-2%;bottom:-3%;width:21%;background:#1c0a0b;border-radius:3cqw;padding:.75cqw;box-shadow:0 0 0 .15cqw #3a2a2b,0 3cqw 5cqw -.8cqw rgba(0,0,0,.6);transform:rotate(4deg);animation:phoneIn 1s cubic-bezier(.2,.8,.2,1) .7s both,phoneFloat 6s ease-in-out 1.8s infinite}
@keyframes phoneIn{from{opacity:0;transform:translateY(7cqw) rotate(10deg)}to{opacity:1;transform:rotate(4deg)}}
@keyframes phoneFloat{0%,100%{transform:rotate(4deg)}50%{transform:translateY(-1.3cqw) rotate(4deg)}}
.p-in{position:relative;background:var(--nx-paper);border-radius:2.4cqw;aspect-ratio:9/18.5;overflow:hidden;padding:3.2cqw 1.4cqw 1.4cqw;display:flex;flex-direction:column;gap:1cqw;font-size:1.3cqw;color:var(--nx-ink)}
.p-in::before{content:"";position:absolute;top:.9cqw;left:50%;width:5cqw;height:1.2cqw;border-radius:99px;background:#1c0a0b;translate:-50% 0}
.p-h small{display:block;font-size:1.05cqw;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--nx-mute)}
.p-h strong{font-family:var(--nx-font-head);font-size:2cqw;letter-spacing:-.02em}
.p-c{background:#fff;border-radius:.9cqw;padding:.9cqw 1cqw;display:grid;gap:.15cqw;box-shadow:inset 0 0 0 1px var(--nx-line);animation:pAct 6s infinite}
.p-c:nth-of-type(2){animation-delay:2s}.p-c:nth-of-type(3){animation-delay:4s}
.p-c b{color:var(--nx-bord);font-weight:600;font-size:1.2cqw}
.p-c span{font-size:1.2cqw;font-weight:500}
@keyframes pAct{0%,28%{background:var(--nx-bord);box-shadow:none;color:#fff}33%,100%{background:#fff}}
.p-c{color:var(--nx-ink)}
.p-btn{margin-top:auto;background:var(--nx-bord);color:#fff;text-align:center;border-radius:.9cqw;padding:1cqw;font-family:var(--nx-font-head);font-weight:600;font-size:1.25cqw}
.hero-art .badge-f{left:22%;bottom:9%;z-index:3}
@media (max-width:900px){.hero-art .mock.devs{left:24%;width:72%}}
@media (prefers-reduced-motion:reduce){.lap,.phn{animation:none!important}.phn{opacity:1;transform:rotate(4deg)}}
/* Hero-Geraete: groesser */
.hero-art .mock.devs{left:25%;width:73%;top:9%;height:86%}
.lap{width:97%;top:2%}
.l-in{font-size:1.55cqw}
.l-k strong{font-size:2.3cqw}
.l-li p{font-size:1.25cqw}
.phn{width:26%;right:-4%;bottom:-1%}
.p-in{padding:3.6cqw 1.6cqw 1.6cqw;gap:1.2cqw}
.p-h strong{font-size:2.3cqw}
.p-c b,.p-c span{font-size:1.45cqw}
.p-btn{font-size:1.45cqw}
.p-in::before{width:6cqw;height:1.4cqw}
.hero-art .mock.devs{left:26%;width:69%}
.phn{right:-2%}
.p-in{aspect-ratio:9/20.6}
.phn{bottom:4%}
.p-in{gap:.9cqw;padding-bottom:1.3cqw}
.p-c{padding:.65cqw .9cqw}
.p-h strong{font-size:2cqw}
.p-btn{padding:.8cqw}

/* ===== Kennzahlen-Band ===== */
.metrics{background:var(--nx-cream);border:0;position:relative;overflow:hidden}
.metrics::before{content:"";position:absolute;right:-6%;top:-60%;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);pointer-events:none}
.metrics .wrap{padding-top:clamp(44px,6vw,88px);padding-bottom:clamp(44px,6vw,88px);position:relative}
.mt{position:relative;padding:0 clamp(16px,2.4vw,44px);border-left:1px solid rgba(90,20,24,.22)}
.mt:first-child{border-left:0;padding-left:0}
.mt b{display:flex;align-items:flex-end;gap:.14em;font-size:clamp(64px,8.4vw,140px);font-weight:700;letter-spacing:-.06em;line-height:.88;color:var(--nx-bord);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mt b small{font-size:clamp(15px,1.5vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0 0 .6em;color:var(--nx-bord)}
.mt>span{max-width:260px;margin-top:clamp(14px,1.6vw,22px);font-size:clamp(14px,1.1vw,17px);line-height:1.4;color:#4A4742}
.mt::after{content:"";position:absolute;left:clamp(16px,2.4vw,44px);bottom:-14px;height:3px;width:0;background:var(--nx-bord);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.mt:first-child::after{left:0}
.mt:hover::after{width:64px}
.mt:hover b{transform:translateY(-6px)}
@media (max-width:900px){
  .metrics .wrap{row-gap:40px}
  .mt:nth-child(3){border-left:0;padding-left:0}
  .mt:nth-child(3)::after{left:0}
  .mt:nth-child(n+3){border-top:1px solid rgba(90,20,24,.22);padding-top:32px}
}
@media (max-width:560px){.mt b{font-size:clamp(54px,18vw,84px)}}

/* ===== Design-Uebersicht (Startseite) ===== */
.ov-g{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
.ov-p{border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ov-main{background:var(--nx-bord);min-height:clamp(260px,28vw,380px);gap:28px;padding:40px;flex-wrap:wrap;color:#fff}
.ov-main svg{width:clamp(88px,9vw,132px);height:auto}
.ov .wm{font-family:var(--nx-font-head);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff}
.ov-main .wm{font-size:clamp(48px,6vw,76px)}
.ov-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.ov-s1{background:var(--nx-bord);gap:14px;padding:24px}
.ov-s1 svg{width:56px;height:56px}
.ov-s1 .wm{font-size:32px}
.ov-s2{background:var(--nx-cream);gap:22px;padding:24px}
.ov-s2 svg{border-radius:26%;box-shadow:0 0 0 1.5px rgba(90,20,24,.16)}
.ov-s2 .i64{width:64px;height:64px}.ov-s2 .i32{width:32px;height:32px}.ov-s2 .i16{width:16px;height:16px}
.ov-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ov-chip{display:flex;align-items:center;gap:12px;background:var(--nx-cream);border-radius:12px;padding:10px 22px 10px 10px}
.ov-chip i{width:40px;height:40px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);display:block}
.ov-chip b{display:block;font-size:13px;font-weight:600}
.ov-chip small{font-size:11px;color:var(--nx-mute);font-variant-numeric:tabular-nums}
.ov-cards{background:#EBDDBF;border-radius:16px;padding:clamp(32px,5vw,64px) clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,40px);justify-content:center;margin-top:20px}
.ov-c{width:min(300px,100%);aspect-ratio:300/510;border-radius:6px;box-shadow:0 24px 40px -18px rgba(28,26,23,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ov-c:hover{transform:translateY(-8px) rotate(-1deg)}
.ov-cf{background:var(--nx-bord);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;color:#fff}
.ov-cf svg{width:76px;height:76px}
.ov-cf .wm{font-size:48px}
.ov-cb{background:#fff;padding:40px 34px;display:flex;flex-direction:column;justify-content:space-between;color:var(--nx-ink)}
.ov-cb .t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ov-cb .nm{font-family:var(--nx-font-head);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.ov-cb .tt{font-size:13px;color:var(--nx-bord);font-weight:600;margin-top:6px}
.ov-cb .t svg{width:36px;height:36px;border-radius:26%;box-shadow:0 0 0 1.5px rgba(90,20,24,.16);flex:none}
.ov-cb .ct{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:#3D3A36;font-variant-numeric:tabular-nums}
@media (max-width:900px){.ov-g{grid-template-columns:1fr}.ov-side{grid-template-rows:none;grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ov-side{grid-template-columns:1fr}.ov-s1,.ov-s2{min-height:120px}}

/* ===== Webseiten-Vorschau (Startseite) ===== */
.wb{background:var(--nx-white)}
.wb-stage{background:#EBDDBF;border-radius:16px;padding:clamp(20px,4vw,48px) clamp(14px,3vw,40px)}
.wb-win{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(28,26,23,.5);pointer-events:none;user-select:none}
.wb-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#EBDDBF;border-bottom:1px solid #DCCFB4}
.wb-bar b{width:11px;height:11px;border-radius:50%;background:rgba(90,20,24,.35);display:block}
.wb-bar .u{margin-left:14px;flex:1;max-width:360px;height:24px;border-radius:12px;background:#fff;display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--nx-mute)}
.wb-hd{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px clamp(18px,4vw,48px);border-bottom:1px solid var(--nx-line);flex-wrap:wrap}
.wb-logo{display:flex;align-items:center;gap:10px}
.wb-logo svg{width:32px;height:32px;border-radius:26%;box-shadow:0 0 0 1.5px rgba(90,20,24,.16)}
.wb-logo span{font-family:var(--nx-font-head);font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--nx-bord)}
.wb-nav{display:flex;gap:30px;font-size:14px;font-weight:500}
.wb-act{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600}
.wb-act .b{background:var(--nx-bord);color:#fff;border-radius:8px;padding:10px 18px}
.wb-act .a{padding:10px 16px}
.wb-hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,48px);padding:clamp(32px,6vw,72px) clamp(18px,4vw,48px);background:var(--nx-cream)}
.wb-tx{flex:1 1 360px;display:flex;flex-direction:column;gap:22px}
.wb-tx .ey{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-bord)}
.wb-tx .h1{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(28px,4vw,54px);line-height:1.02;letter-spacing:-.035em;color:var(--nx-ink)}
.wb-tx p{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:#4A4742;max-width:480px}
.wb-tx .bt{display:flex;gap:12px;flex-wrap:wrap;font-size:15px;font-weight:600}
.wb-tx .bt .p{background:var(--nx-bord);color:#fff;border-radius:10px;padding:14px 24px}
.wb-tx .bt .s{border:1.5px solid var(--nx-ink);border-radius:10px;padding:12.5px 24px}
.wb-prev{flex:1 1 360px;max-width:560px;margin:0 auto;container-type:inline-size;border-radius:12px;overflow:hidden;box-shadow:0 30px 50px -24px rgba(28,26,23,.5);border:1px solid #E4D6BA;background:var(--nx-paper)}
.wb-prev .l-in{aspect-ratio:1.33;font-size:2.9cqw}
.wb-prev .l-bar{padding:1.6cqw 2cqw}
.wb-prev .l-bar b{width:1.6cqw;height:1.6cqw}
.wb-prev .l-bar span{font-size:2.1cqw;padding:.5cqw 2.4cqw}
.wb-prev .l-bar em{font-size:2.1cqw}
.wb-prev .l-body{grid-template-columns:8cqw 1fr}
.wb-prev .l-side i{width:4cqw;height:4cqw;border-radius:1cqw}
.wb-prev .l-main{padding:2.4cqw;gap:2cqw}
.wb-prev .l-k{gap:1.6cqw}
.wb-prev .l-k div{padding:1.4cqw 1.8cqw;border-radius:1cqw}
.wb-prev .l-k small{font-size:1.9cqw}
.wb-prev .l-k strong{font-size:4.4cqw}
.wb-prev .l-ch{padding:1.8cqw;gap:1.4cqw;border-radius:1cqw}
.wb-prev .l-ch i{border-radius:.6cqw .6cqw 0 0}
.wb-prev .l-li{padding:.6cqw 2cqw;border-radius:1cqw}
.wb-prev .l-li p{font-size:2.4cqw;padding:1.1cqw 0}
.wb-mw{padding:clamp(32px,5vw,72px) clamp(18px,4vw,48px);display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.wb-mw h3{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(24px,3vw,36px);letter-spacing:-.03em}
.wb-mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.wb-m{border:1px solid var(--nx-line);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:14px}
.wb-m .ic{width:40px;height:40px;border-radius:10px;background:var(--nx-bord);display:grid;place-items:center}
.wb-m .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wb-m b{font-family:var(--nx-font-head);font-size:18px;font-weight:600;letter-spacing:-.01em}
.wb-m p{font-size:14px;line-height:1.5;color:#5A5650}
.wb-cta{margin:0 clamp(18px,4vw,48px) clamp(24px,4vw,56px);background:var(--nx-bord);color:#fff;border-radius:16px;padding:clamp(28px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.wb-cta div{font-family:var(--nx-font-head);font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;line-height:1.15;max-width:460px}
.wb-cta span{background:var(--nx-cream);color:var(--nx-bord-d);border-radius:10px;padding:15px 26px;font-weight:600;font-size:15px}
@media (max-width:760px){.wb-nav{display:none}.wb-act .a{display:none}}

/* ===== Laptop-Bildschirm: Nexoro-Uebersicht (Test 1) ===== */
.lap .l-in{display:block;container-type:inline-size;aspect-ratio:1.5;background:#f5f2ea;font-size:inherit}
.ov2{padding:3.4cqw 3.6cqw 0;color:#1f1d1a;font-family:'Inter',sans-serif;height:100%}
.ov2 .hd2{display:flex;justify-content:space-between;align-items:center}
.ov2 .lg2{font-weight:700;font-size:3.9cqw;letter-spacing:-.01em;color:#a8262b;line-height:1}
.ov2 .av{width:4.4cqw;height:4.4cqw;border-radius:50%;background:#fff;box-shadow:0 .3cqw 1.2cqw rgba(40,30,15,.14);display:grid;place-items:center;font-size:1.3cqw;font-weight:700}
.ov2 .eb{font-size:1.7cqw;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a9824a;margin-top:4.2cqw}
.ov2 .dt{font-size:2cqw;color:#5f6b78;margin-top:1.2cqw}
.ov2 .gr{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:4.1cqw;line-height:1.12;margin-top:2cqw}
.ov2 .cols{display:grid;grid-template-columns:1fr 1fr;gap:3.6cqw;margin-top:3.6cqw}
.ov2 .col{border-top:1px solid #e4dfd1;align-self:start}
.ov2 .ar{display:grid;grid-template-columns:5.2cqw minmax(0,1fr) auto 2.6cqw;align-items:center;border-bottom:1px solid #e4dfd1;padding:1.3cqw 0;min-height:9.6cqw}
.ov2 .ar svg{width:2.6cqw;height:2.6cqw;fill:none;stroke:#1f1d1a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ov2 .tx{display:flex;flex-direction:column;gap:.7cqw;min-width:0}
.ov2 .tx b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:3cqw;line-height:1.1}
.ov2 .tx span{font-size:2cqw;color:#86652f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov2 .vl{display:flex;flex-direction:column;align-items:flex-end;padding-left:1cqw}
.ov2 .vl b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:2.6cqw;line-height:1;color:#1f1d1a}
.ov2 .vl b.z{color:#8a857c}
.ov2 .go{font-style:normal;color:#c9a774;font-size:2.6cqw;justify-self:end}
.phn{width:21%;bottom:-17%;right:0}
.lap{top:0}
.phn{width:19%;bottom:-3%;right:1%}
/* nur Laptop, gross und gut lesbar */
.phn{display:none}
.hero-art .mock.devs{left:17%;width:80%}
.lap{width:100%;top:10%}
.hero-art .badge-f{left:24%;bottom:12%}
.hero-art .badge-f{left:22%;bottom:3.5%}

/* ===== Interaktive Geraete-Showcase: iPad + iPhone (Beispiel-Webseite) ===== */
.hero-g{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr)}
.hero h1{font-size:clamp(40px,5vw,72px)}
@media (max-width:1100px){.hero-g{grid-template-columns:1fr}}
.hero-art{clip-path:none;border-radius:var(--nx-radius);aspect-ratio:1.5}
.hero-art .mock.devs.ds{left:5%;right:auto;top:46%;bottom:auto;translate:0 -50%;width:90%;height:auto;aspect-ratio:1.5;container-type:inline-size;background:none;box-shadow:none;border-radius:0;overflow:visible;z-index:1}
.ds .dev{position:absolute;background:linear-gradient(135deg,#3a3835 0%,#1c1b19 45%,#2c2a27 100%);box-shadow:inset 0 0 0 .12cqw #5a5650,inset 0 0 0 .34cqw #121110,0 3.4cqw 5.6cqw -2cqw rgba(0,0,0,.6);cursor:pointer;transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),opacity .5s,transform .5s,filter .4s}
.ds .dev:not(.front):hover{filter:brightness(1.06)}
.ds .ipad{left:0;top:4%;width:68%;aspect-ratio:4/3;border-radius:2.8cqw;padding:1.4cqw;z-index:1}
.ds .iph{right:0;bottom:2%;width:27%;aspect-ratio:9/18.6;border-radius:4cqw;padding:.85cqw;z-index:2;transform:rotate(3deg);animation:ipFloat 7s ease-in-out infinite}
@keyframes ipFloat{50%{translate:0 -.9cqw}}
.ds .dev.front{z-index:3}
.ds .ds-scr{position:relative;height:100%;border-radius:1.6cqw;overflow:hidden;background:#f5f2ea;container-type:inline-size;display:flex;flex-direction:column;color:#1f1d1a;font-family:'Inter',sans-serif}
.ds .iph .ds-scr{border-radius:3.2cqw}
.ds .isl{position:absolute;top:1.6cqw;left:50%;translate:-50% 0;width:31%;height:3.6cqw;border-radius:99px;background:#000;z-index:4}
.ds .hi{position:absolute;bottom:1.2cqw;left:50%;translate:-50% 0;width:34%;height:.6cqw;border-radius:99px;background:#1f1d1a;z-index:4}
.ds .s-url{display:flex;align-items:center;justify-content:center;gap:1.4cqw;background:#ece3cf;padding:1.5cqw 3cqw;font-size:2.4cqw;font-weight:500;color:#4A4742;flex:none}
.ds .s-url svg{width:2.4cqw;height:2.4cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ds .s-url span{background:#fff;border-radius:99px;padding:.7cqw 5cqw}
.ds .iph .s-url{padding:13cqw 6cqw 2.4cqw;font-size:5cqw}
.ds .iph .s-url svg{width:4.6cqw;height:4.6cqw}
.ds .s-view{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.ds .s-view::-webkit-scrollbar{display:none}
.ds .site{background:#f5f2ea}
.ds .s-btn{font-style:normal;display:inline-block;background:#5A1418;color:#fff;font-weight:600;border-radius:.8cqw}
.ds .s-nav{display:flex;align-items:center;justify-content:space-between;padding:2.4cqw 4cqw;background:#fff;box-shadow:0 .2cqw 0 #e4dfd1}
.ds .s-nav b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:3.2cqw;letter-spacing:-.03em;color:#5A1418}
.ds .s-nav nav{display:flex;gap:3.2cqw;font-size:2.2cqw;font-weight:500}
.ds .s-nav .s-btn{font-size:2.1cqw;padding:1.1cqw 2.2cqw}
.ds .s-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3cqw;align-items:center;padding:6cqw 4cqw;background:#F5E9D4}
.ds .s-hero small{font-size:1.9cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5A1418}
.ds .s-hero h4{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:6.4cqw;line-height:1.02;letter-spacing:-.04em;margin:1.4cqw 0 2cqw;color:#2A1B1C}
.ds .s-hero p{font-size:2.5cqw;line-height:1.5;color:#4A4742;margin-bottom:2.6cqw}
.ds .s-btn.big{font-size:2.4cqw;padding:1.5cqw 2.8cqw}
.ds .s-img{aspect-ratio:1;background:#5A1418;border-radius:1.2cqw;position:relative;overflow:hidden}
.ds .s-img span{position:absolute;border-radius:50%;background:rgba(245,233,212,.9)}
.ds .s-img span:first-child{width:46%;height:46%;right:10%;top:12%}
.ds .s-img span:last-child{width:26%;height:26%;left:14%;bottom:14%;background:rgba(245,233,212,.35)}
.ds .s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:5cqw 4cqw}
.ds .s-c{background:#fff;border-radius:1cqw;padding:2.6cqw;box-shadow:inset 0 0 0 .15cqw #e4dfd1}
.ds .s-c i{display:block;width:4cqw;height:4cqw;border-radius:1cqw;background:#5A1418;margin-bottom:1.8cqw}
.ds .s-c b{font-family:'Inter Tight',sans-serif;font-size:2.8cqw;font-weight:600;display:block;margin-bottom:.8cqw}
.ds .s-c p{font-size:2cqw;line-height:1.45;color:#6B6760}
.ds .s-band{display:flex;justify-content:space-between;align-items:center;gap:2cqw;margin:0 4cqw;background:#5A1418;color:#fff;border-radius:1.2cqw;padding:3.6cqw}
.ds .s-band b{font-family:'Inter Tight',sans-serif;font-size:3.6cqw;letter-spacing:-.03em}
.ds .s-band .s-btn{background:#F5E9D4;color:#3E0D10;font-size:2.2cqw;padding:1.3cqw 2.4cqw}
.ds .s-foot{padding:4cqw;font-size:1.9cqw;color:#6B6760}
/* iPhone-Variante der Seite */
.ds .s-mob .s-nav{padding:4.6cqw 6cqw}
.ds .s-mob .s-nav b{font-size:7cqw}
.ds .s-bur{display:grid;gap:1.1cqw}
.ds .s-bur u{display:block;width:6.4cqw;height:.7cqw;border-radius:2px;background:#2A1B1C}
.ds .s-mob .s-hero{grid-template-columns:1fr;padding:9cqw 6cqw;gap:6cqw}
.ds .s-mob .s-hero small{font-size:4cqw}
.ds .s-mob .s-hero h4{font-size:12.5cqw;margin:3cqw 0 4cqw}
.ds .s-mob .s-hero p{font-size:5.2cqw;margin-bottom:5cqw}
.ds .s-mob .s-btn{border-radius:1.6cqw}
.ds .s-mob .s-btn.big{font-size:5cqw;padding:3.2cqw 6cqw}
.ds .s-mob .s-img{aspect-ratio:1.6}
.ds .s-mob .s-cards{grid-template-columns:1fr;gap:4cqw;padding:7cqw 6cqw}
.ds .s-mob .s-c{padding:5cqw;border-radius:2cqw}
.ds .s-mob .s-c i{width:8cqw;height:8cqw;border-radius:2cqw;margin-bottom:3cqw}
.ds .s-mob .s-c b{font-size:6cqw}
.ds .s-mob .s-c p{font-size:4.4cqw}
.ds .s-mob .s-band{flex-direction:column;align-items:flex-start;margin:0 6cqw;padding:6cqw;border-radius:2cqw}
.ds .s-mob .s-band b{font-size:7cqw}
.ds .s-mob .s-band .s-btn{font-size:4.6cqw;padding:2.8cqw 5cqw}
.ds .s-mob .s-foot{font-size:4cqw;padding:7cqw 6cqw 14cqw}
/* Modi */
.ds[data-mode=ipad] .iph{opacity:0;pointer-events:none;transform:rotate(3deg) translateY(4cqw) scale(.92)}
.ds[data-mode=ipad] .ipad{left:6%;width:88%}
.ds[data-mode=iphone] .ipad{opacity:0;pointer-events:none;transform:scale(.94)}
.ds[data-mode=iphone] .iph{right:50%;translate:50% 0;width:36%;bottom:0;animation:none;transform:none}
/* Steuerung */
.ds-ctrl{position:absolute;z-index:6;left:calc(5% + 45%);bottom:3.2%;translate:-50% 0;display:flex;gap:4px;padding:5px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ds-b{font-family:var(--nx-font-head);font-weight:500;font-size:13px;color:#fff;background:transparent;border:0;padding:8px 16px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s}
.ds-b:hover{background:rgba(255,255,255,.14)}
.ds-b[aria-pressed=true]{background:var(--nx-cream);color:var(--nx-bord-d)}
.ds-lbl{position:absolute;z-index:6;right:3%;top:4%;font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.78);font-family:var(--nx-font-head)}
@media (prefers-reduced-motion:reduce){.ds .iph{animation:none}}
.ds[data-mode=ipad] .ipad{left:11%;width:78%;top:2%}
.ds[data-mode=iphone] .iph{width:27%;bottom:9%}

/* Live-Webseite im Geraet */
.ds .s-view{position:relative}
.ds .s-frame{position:absolute;left:0;top:0;border:0;transform-origin:0 0;opacity:0;transition:opacity .6s;background:#fff}
.ds .ds-scr.loaded .s-frame{opacity:1}
.ds .ds-scr.loaded .site{display:none}
.ds .ds-scr.loaded .s-view{overflow:hidden}
.ds-lbl{text-decoration:none;transition:color .2s}
.ds-lbl:hover{color:#fff}

/* Geraete groesser */
.hero-g{grid-template-columns:minmax(0,.78fr) minmax(0,1.32fr)}
.hero h1{font-size:clamp(38px,4.5vw,66px)}
.hero-art{aspect-ratio:1.32}
.hero-art .mock.devs.ds{left:3%;width:94%;aspect-ratio:1.32;top:47%}
.ds .ipad{width:70%;top:3%}
.ds .iph{width:30%;bottom:1%}
.ds[data-mode=ipad] .ipad{left:5%;width:90%}
.ds[data-mode=iphone] .iph{width:34%;bottom:8%}
.ds-ctrl{left:50%}
@media (max-width:1100px){.hero-g{grid-template-columns:1fr}}
.hero .hero-g{max-width:1500px;margin:0 auto}
/* Realistische Proportionen: iPhone ca. 80 % der iPad-Hoehe */
.hero-g{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
.hero h1{font-size:clamp(40px,5vw,70px)}
.hero-art{aspect-ratio:1.5}
.hero-art .mock.devs.ds{left:4%;width:92%;aspect-ratio:1.5;top:47%}
.ds .ipad{width:74%;top:6%;left:0;padding:1.1cqw;border-radius:2.4cqw}
.ds .ipad .ds-scr{border-radius:1.4cqw}
.ds .iph{width:21.5%;bottom:5%;right:0;padding:.7cqw;border-radius:3.3cqw;transform:rotate(2deg)}
.ds .iph .ds-scr{border-radius:2.7cqw}
.ds[data-mode=ipad] .ipad{left:7%;width:86%}
.ds[data-mode=iphone] .iph{width:27%;bottom:9%;transform:none}
/* volle Breite: keine Begrenzung im Hero */
.hero .hero-g{max-width:none}
.hero-g{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(24px,4vw,72px)}
/* Scharfe Schrift im Geraet: keine 3D-Kippung, keine Drehung */
.hero-art .mock.devs.ds{transform:none!important;transition:none}
.ds .iph{transform:none!important}
.ds[data-mode=ipad] .iph{transform:translateY(4cqw) scale(.92)!important}
.ds .s-frame{will-change:auto;backface-visibility:visible;-webkit-font-smoothing:antialiased}
.ds .ipad{width:77%}
.ds .iph{width:22%}

/* ===== Statische App-Uebersicht in den Geraeten (Testdaten) ===== */
.ds .s-view{overflow:hidden;background:#f5f2ea}
.ds .iph .s-view{overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.ds .iph .s-view::-webkit-scrollbar{display:none}
.ds .app{background:#f5f2ea;color:#1f1d1a;font-family:'Inter',sans-serif;box-sizing:border-box;min-height:100%}
.ds .app button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.ds .app [hidden]{display:none!important}
.app .a-home,.app .a-detail{padding:26px 32px 28px}
.app.a-mob .a-home,.app.a-mob .a-detail{padding:20px 20px 40px}
.app .a-hd{display:flex;justify-content:space-between;align-items:center}
.app .a-lg{font-weight:700;font-size:30px;letter-spacing:-.01em;color:#a8262b;line-height:1}
.app.a-mob .a-lg{font-size:24px}
.app .a-av{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(40,30,15,.14);display:grid;place-items:center;font-size:11px;font-weight:700}
.app.a-mob .a-av{width:32px;height:32px;font-size:10px}
.app .a-eb{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a9824a;margin-top:22px}
.app .a-dt{font-size:12px;color:#5f6b78;margin-top:6px}
.app .a-gr{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:31px;line-height:1.12;margin-top:12px}
.app.a-mob .a-gr{font-size:27px}
.app .a-sub{font-size:12.5px;color:#5f6b78;margin-top:12px}
.app .a-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;margin-top:22px;align-items:start}
.app.a-mob .a-cols{grid-template-columns:1fr}
.app .a-col{border-top:1px solid #e4dfd1}
.app .a-r{display:grid;grid-template-columns:44px minmax(0,1fr) auto 24px;align-items:center;width:100%;height:68px;border-bottom:1px solid #e4dfd1;text-decoration:none;color:inherit;transition:background .2s}
.app.a-mob .a-r{height:78px;grid-template-columns:36px minmax(0,1fr) auto 22px}
.app .a-r:hover{background:rgba(169,130,74,.07)}
.app .a-r svg{width:20px;height:20px;fill:none;stroke:#1f1d1a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.app .a-r .t{display:flex;flex-direction:column;min-width:0}
.app .a-r .t em{font-style:normal;font-size:9px;color:#6b6760;font-variant-numeric:tabular-nums}
.app .a-r .t b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;line-height:1.05;margin-top:4px}
.app .a-r .t span{font-size:11px;color:#86652f;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .a-r .v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-left:8px}
.app .a-r .v b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:15px;line-height:1;color:#1f1d1a}
.app .a-r .v b.z{color:#8a857c}
.app .a-r .v span{font-size:8.5px;color:#6b6760}
.app .a-r i{font-style:normal;color:#c9a774;font-size:15px;justify-self:end}
/* Detail */
.app .a-back{font-size:13px;font-weight:600;color:#a8262b;display:inline-flex;gap:6px;align-items:center;padding:4px 0}
.app .a-dh{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.app .a-dh h5{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:32px;line-height:1.05}
.app.a-mob .a-dh h5{font-size:27px}
.app .a-test{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#F5E9D4;color:#5A1418;border-radius:99px;padding:4px 10px;box-shadow:inset 0 0 0 1px rgba(90,20,24,.25)}
.app .a-ds{font-size:13px;color:#86652f;margin-top:8px}
.app .a-list{margin-top:22px;border-top:1px solid #e4dfd1}
.app .a-li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 0;border-bottom:1px solid #e4dfd1}
.app .a-li b{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px}
.app .a-li small{grid-column:1;font-size:11.5px;color:#6b6760}
.app .a-li span{grid-row:1/3;grid-column:2;font-size:13px;font-weight:600;color:#5A1418;text-align:right}
.app .a-note{margin-top:18px;font-size:11.5px;color:#8a857c}
@keyframes aIn{from{opacity:0;transform:translateY(8px)}}
.app .a-detail:not([hidden]),.app .a-home.in{animation:aIn .35s cubic-bezier(.2,.8,.2,1)}
.app.a-tab .a-home{padding:20px 32px 16px}
.app.a-tab .a-eb{margin-top:16px}
.app.a-tab .a-gr{font-size:29px;margin-top:8px}
.app.a-tab .a-sub{margin-top:8px}
.app.a-tab .a-cols{margin-top:16px}
.app.a-tab .a-r{height:63px}

/* Live-Seite: iPad nur Ansicht, iPhone bedienbar */
.ds .s-view{position:relative;overflow:hidden}
.ds .s-frame{position:absolute;left:0;top:0;border:0;transform-origin:0 0;opacity:0;transition:opacity .6s;background:#fff}
.ds .ds-scr.loaded .s-frame{opacity:1}
.ds .ipad .s-frame{pointer-events:none}
.ds .iph .s-frame{pointer-events:auto}

/* ===== Download ===== */
.dls{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.dl{background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .25s}
.dl:hover{transform:translateY(-4px);box-shadow:0 24px 40px -22px rgba(90,20,24,.45)}
.dl .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dl .ic{width:56px;height:56px;border-radius:14px;background:var(--nx-bord);display:grid;place-items:center}
.dl .ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl-tag{font-family:var(--nx-font-head);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:var(--nx-cream);color:var(--nx-bord)}
.dl-tag.ok{background:var(--nx-bord);color:#fff}
.dl h3{font-size:26px;font-weight:600;letter-spacing:-.03em}
.dl p{font-size:14.5px;color:var(--nx-mute);flex:1}
.dl small{font-size:12.5px;color:var(--nx-mute);font-weight:500}
.dl .act{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px}
.dl-off{opacity:.4;cursor:not-allowed;pointer-events:none}
@media (max-width:1100px){.dls{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dls{grid-template-columns:1fr}}
/* Header: Platz fuer 8 Menuepunkte */
@media (max-width:1560px){nav.mn a.t{padding:10px 8px;font-size:14px}.hs{width:170px}.hd-r{gap:14px}}
@media (max-width:1180px){nav.mn a.t{padding:10px 6px;font-size:13.5px}}
.btn{white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}

/* ===== Konfigurator 2.0 ===== */
.cfg2{position:relative;overflow:hidden;padding:clamp(72px,9vw,140px) 0}
.cfg-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(700px circle at var(--mx,30%) var(--my,20%),rgba(245,233,212,.13),transparent 60%),
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent)}
.cfg2 .wrap{position:relative}
.cfg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.cfg2 h2{margin:16px 0 12px;font-weight:600;font-size:clamp(40px,5.4vw,84px)}
.cfg2 .sub{color:rgba(255,255,255,.75);font-size:18px;max-width:520px}
.presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.presets>span{font-family:var(--nx-font-head);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-right:6px}
.pre-b{font-family:var(--nx-font-head);font-weight:500;font-size:14px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:9px 16px;cursor:pointer;transition:.25s cubic-bezier(.2,.8,.2,1)}
.pre-b:hover{background:var(--nx-cream);color:var(--nx-bord-d);border-color:var(--nx-cream);transform:translateY(-2px)}
.cf-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.groups{display:grid;gap:clamp(28px,3.4vw,48px)}
.grp h3{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:16px}
.grp h3 i{font-style:normal;color:var(--nx-cream);font-size:13px}
.grp h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tile{position:relative;text-align:left;color:#fff;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:20px 20px 18px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .4s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--tx,50%) var(--ty,50%),rgba(245,233,212,.18),transparent 60%);opacity:0;transition:opacity .3s}
.tile:hover{border-color:rgba(245,233,212,.6);transform:translateY(-3px)}
.tile:hover::before{opacity:1}
.tile .ti{grid-row:span 2;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.tile .ti svg{width:24px;height:24px;stroke:var(--nx-cream);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.tile b{font-family:var(--nx-font-head);font-weight:600;font-size:19px;letter-spacing:-.02em;align-self:end}
.tile small{font-size:13px;color:rgba(255,255,255,.62);align-self:start;transition:color .3s}
.tile .chk{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);transition:.3s}
.tile .chk::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid var(--nx-bord);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1) .05s}
.tile[aria-pressed=true]{background:var(--nx-cream);color:var(--nx-bord-d);border-color:var(--nx-cream);transform:translateY(-2px);box-shadow:0 24px 50px -22px rgba(245,233,212,.55)}
.tile[aria-pressed=true] small{color:#6B6760}
.tile[aria-pressed=true] .ti{background:var(--nx-bord);transform:rotate(-6deg) scale(1.06)}
.tile[aria-pressed=true] .ti svg{stroke:#fff}
.tile[aria-pressed=true] .chk{background:var(--nx-bord);border-color:var(--nx-bord)}
.tile[aria-pressed=true] .chk::after{border-color:#fff;transform:rotate(45deg) scale(1)}
.tile[aria-pressed=true]::before{display:none}
/* Blueprint-Panel */
.bp{position:sticky;top:96px;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:clamp(22px,2.4vw,32px);color:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.bp-h{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.bp .ring{width:96px;height:96px}
.bp .ring .bgc{stroke:rgba(255,255,255,.14)}
.bp .ring .fgc{stroke:var(--nx-cream)}
.bp .ring b{font-size:32px;color:#fff}
.bp-h small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bp-h h3{font-size:24px;font-weight:600;letter-spacing:-.025em;margin:4px 0 4px}
.bp-h span{font-size:14px;color:rgba(255,255,255,.7)}
.meter{margin-bottom:20px}
.meter>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter i{height:6px;border-radius:3px;background:rgba(255,255,255,.16);transition:background .5s,box-shadow .5s}
.meter i.on{background:var(--nx-cream);box-shadow:0 0 14px rgba(245,233,212,.55)}
.meter p{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;font-size:10.5px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.04em}
.bp-l{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;min-height:44px;align-content:flex-start}
.bp-l li{display:inline-flex;align-items:center;gap:8px;background:var(--nx-cream);color:var(--nx-bord-d);border-radius:99px;padding:7px 8px 7px 14px;font-size:13.5px;font-weight:600;animation:chipIn .45s cubic-bezier(.2,.8,.2,1) both;cursor:pointer}
.bp-l li::after{content:"×";width:20px;height:20px;border-radius:50%;background:rgba(90,20,24,.12);display:grid;place-items:center;font-size:14px;line-height:1}
.bp-l li:hover::after{background:var(--nx-bord);color:#fff}
.bp-l li.empty{background:none;color:rgba(255,255,255,.55);font-weight:400;padding:4px 0;cursor:default}
.bp-l li.empty::after{content:none}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.85)}}
.sug{margin-bottom:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
.sug small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sug div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sug button{font-family:var(--nx-font-head);font-weight:500;font-size:13px;color:#fff;background:transparent;border:1px dashed rgba(255,255,255,.4);border-radius:99px;padding:7px 14px;cursor:pointer;transition:.25s}
.sug button:hover{background:rgba(255,255,255,.12);border-style:solid}
.sug button::before{content:"+ ";opacity:.7}
.bp-go{width:100%;justify-content:center;box-shadow:none}
.bp-go:not(:disabled){animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(245,233,212,.18),0 14px 40px -10px rgba(245,233,212,.5)}}
.bp-n{margin-top:12px;font-size:12px;color:rgba(255,255,255,.55);text-align:center}
@media (max-width:1100px){.cf-g{grid-template-columns:1fr}.bp{position:static}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}.cfg-top{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.bp-go:not(:disabled){animation:none}}


/* iPad: scrollbar, aber nichts anklickbar */
.ds .ipad .ds-scr.loaded .s-view,.ds .ipad .s-view{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.ds .ipad .s-view::-webkit-scrollbar{display:none}

/* Laptop (nur im Modus "Laptop") */
.ds .lap{left:11%;top:11%;width:78%;aspect-ratio:16/10;border-radius:1.8cqw 1.8cqw .6cqw .6cqw;padding:1.1cqw 1.1cqw 1.4cqw;z-index:1;opacity:0;pointer-events:none;transform:translateY(3cqw) scale(.96);cursor:default;box-shadow:inset 0 0 0 .12cqw #5a5650,inset 0 0 0 .34cqw #121110,0 3.4cqw 5.6cqw -2cqw rgba(0,0,0,.6)}
.ds .lap .ds-scr{border-radius:.8cqw}
.ds .lap::after{content:"";position:absolute;left:-5%;right:-5%;top:100%;height:2.4cqw;border-radius:0 0 2.4cqw 2.4cqw;background:linear-gradient(180deg,#cfcac2,#8d8981);box-shadow:0 1.6cqw 2.4cqw -1cqw rgba(0,0,0,.55)}
.ds .lap::before{content:"";position:absolute;left:50%;translate:-50% 0;top:100%;width:14%;height:.7cqw;border-radius:0 0 .8cqw .8cqw;background:#6f6b64;z-index:1}
.ds .lap .s-view{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.ds .lap .s-view::-webkit-scrollbar{display:none}
.ds .lap .s-frame{pointer-events:none}
.ds[data-mode=laptop] .lap{opacity:1;pointer-events:auto;transform:none}
.ds[data-mode=laptop] .ipad{opacity:0;pointer-events:none;transform:scale(.94)}
.ds[data-mode=laptop] .iph{opacity:0;pointer-events:none}
.ds[data-mode=both] .lap,.ds[data-mode=ipad] .lap,.ds[data-mode=iphone] .lap{opacity:0;pointer-events:none}

/* Hero ohne roten Hintergrund */
.hero-art{background:none!important;overflow:visible}
.hero-art::before,.hero-art::after{display:none!important}
.ds-ctrl{background:var(--nx-cream);box-shadow:inset 0 0 0 1px rgba(90,20,24,.14);backdrop-filter:none}
.ds-b{color:var(--nx-bord)}
.ds-b:hover{background:rgba(90,20,24,.08)}
.ds-b[aria-pressed=true]{background:var(--nx-bord);color:#fff}
.ds-lbl{color:var(--nx-bord)}
.ds-lbl:hover{color:var(--nx-bord-d)}

/* Ansicht "Beide": Laptop, iPad und iPhone zusammen */
.ds[data-mode=both] .lap{opacity:1;pointer-events:auto;transform:none;left:0;top:1%;width:64%;z-index:1;cursor:pointer}
.ds[data-mode=both] .ipad{left:27%;top:auto;bottom:1%;width:47%;z-index:2}
.ds[data-mode=both] .iph{right:0;bottom:0;width:19%;z-index:3}
.ds[data-mode=both] .dev.front{z-index:4}
.ds[data-mode=both] .lap .s-frame{pointer-events:none}
.ds[data-mode=both] .ipad{bottom:9%}
.ds[data-mode=both] .iph{bottom:7%}
.ds[data-mode=both] .lap{top:0}
.ds[data-mode=ipad] .ipad{left:13%;width:74%;top:0}

/* Nur Computer (Monitor) */
.ds[data-mode=monitor] .mon{left:9%;top:1%;width:82%;aspect-ratio:16/10;padding:1cqw 1cqw 2.6cqw;border-radius:1.3cqw;cursor:default;z-index:1}
.ds[data-mode=monitor] .mon .ds-scr{border-radius:.5cqw}
.ds[data-mode=monitor] .mon::before{content:"";position:absolute;left:50%;translate:-50% 0;top:100%;width:11%;height:5.2cqw;background:linear-gradient(90deg,#8d8981,#d7d2ca 50%,#8d8981)}
.ds[data-mode=monitor] .mon::after{content:"";position:absolute;left:50%;translate:-50% 0;top:calc(100% + 5.2cqw);width:24%;height:1cqw;border-radius:.5cqw .5cqw 1cqw 1cqw;background:linear-gradient(180deg,#d7d2ca,#8d8981);box-shadow:0 1.4cqw 2cqw -.8cqw rgba(0,0,0,.5)}
.ds[data-mode=monitor] .mon .s-view{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.ds[data-mode=monitor] .mon .s-view::-webkit-scrollbar{display:none}
.ds[data-mode=monitor] .mon .s-frame{pointer-events:none}
.hero-g{grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);gap:clamp(20px,3vw,56px)}
@media (max-width:1100px){.hero-g{grid-template-columns:1fr}}
.hero-art .mock.devs.ds[data-mode=monitor]{left:0;width:100%;aspect-ratio:1.5;top:50%}
.ds[data-mode=monitor] .mon{left:0;top:0;width:100%;aspect-ratio:16/9.8}
.ds[data-mode=monitor] .mon{left:5%;width:90%}
.hero-g{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr)}
@media (max-width:1100px){.hero-g{grid-template-columns:1fr}}
.ds[data-mode=monitor] .mon{left:0;width:100%}
.hero-g{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr)}
@media (max-width:1100px){.hero-g{grid-template-columns:1fr}}
.ds[data-mode=monitor] .mon{left:4%;width:92%}

/* Hero: nur Laptop */
.hero-art .mock.devs.ds[data-mode=laptop]{left:0;width:100%;aspect-ratio:1.5;top:50%;translate:0 -50%}
.ds[data-mode=laptop] .lap:only-child{left:7%;top:3%;width:86%;cursor:default}

/* Hero-Laptop steht fest: keine Neigung, kein Schweben, keine Bewegung */
.hero-art .mock,.hero-art .mock.devs.ds,.ds[data-mode=laptop] .lap{transform:none!important;animation:none!important;transition:none!important;rotate:none!important}
.hero-art .mock *{animation:none!important}
.hero-art .badge-f{display:none}

/* Hero: fertige Uebersicht (Computer + Handy) */
.hero-art{aspect-ratio:1.25!important;container-type:normal}
.hero-art .hero-fin{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;display:block}
.hero-art{aspect-ratio:900/585!important;overflow:hidden;border-radius:var(--nx-radius)}
.hero-art .hero-fin{width:900px;height:585px;inset:auto;left:0;top:0}

/* ===== Branchen-Lab ===== */
.lab{background:#fff;padding:clamp(72px,9vw,130px) 0}
.lab-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,48px)}
.lab-top h2{margin:16px 0 0;max-width:820px}
.lab-top p{max-width:440px;color:var(--nx-mute);font-size:17px}
.lab-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.lab-tab{font-family:var(--nx-font-head);font-weight:500;font-size:15px;background:var(--nx-cream);color:var(--nx-ink);border:1px solid transparent;padding:12px 22px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.lab-tab:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(90,20,24,.5)}
.lab-tab[aria-selected=true]{background:var(--nx-bord);color:#fff}
.lab-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:stretch;background:var(--nx-cream);border-radius:var(--nx-radius);padding:clamp(24px,3.4vw,56px)}
.lab-info{display:flex;flex-direction:column;justify-content:center;gap:18px}
.lab-ind{align-self:flex-start;font-family:var(--nx-font-head);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:#fff;color:var(--nx-bord);padding:5px 10px;border-radius:var(--nx-radius)}
.lab-info h3{font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.03em}
.lab-info>p{color:var(--nx-ink);opacity:.8;font-size:17px;max-width:460px}
.lab-btns{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:6px}
.lab.lab-sw .lab-info>*,.lab.lab-sw .lab-win{animation:labIn .5s cubic-bezier(.2,.8,.2,1) both}
.lab.lab-sw .lab-info>*:nth-child(2){animation-delay:.04s}.lab.lab-sw .lab-info>*:nth-child(3){animation-delay:.08s}.lab.lab-sw .lab-info>*:nth-child(4){animation-delay:.12s}.lab.lab-sw .lab-info>*:nth-child(5){animation-delay:.16s}
@keyframes labIn{from{opacity:0;translate:0 14px}}
.lab-win{background:#fff;border-radius:12px;box-shadow:0 30px 70px -34px rgba(62,13,16,.55),0 0 0 1px rgba(90,20,24,.08);overflow:hidden;display:flex;flex-direction:column;min-height:440px}
.lab-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#EDE1C8}
.lab-bar b{width:10px;height:10px;border-radius:50%;background:rgba(90,20,24,.28)}
.lab-bar span{margin-left:10px;font-family:var(--nx-font-head);font-size:13px;font-weight:600;color:var(--nx-bord)}
.lab-bar em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#fff;color:var(--nx-bord);border-radius:99px;padding:4px 10px}
.lab-body{padding:clamp(18px,2.2vw,30px);flex:1;font-size:15px;color:var(--nx-ink)}
.dm-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dm-h b{font-family:var(--nx-font-head);font-size:20px;font-weight:600;letter-spacing:-.02em}
.dm-h span{font-size:13px;color:var(--nx-mute)}
.dm-rows{display:grid;gap:14px;margin-bottom:18px}
.dm-r{display:grid;gap:6px;background:#FBF6EB;border-radius:8px;padding:14px 16px}
.dm-r>span{display:flex;justify-content:space-between;font-weight:600}
.dm-r>span i{font-style:normal;color:var(--nx-bord)}
.dm-r em{font-style:normal;font-size:12px;color:var(--nx-mute)}
.dm-r input[type=range]{width:100%;accent-color:var(--nx-bord);height:22px}
.dm-sw{grid-template-columns:1fr auto;align-items:center;cursor:pointer;position:relative}
.dm-sw input{position:absolute;opacity:0}
.tg{width:46px;height:26px;border-radius:99px;background:#DDD3BE;position:relative;transition:background .25s}
.tg::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:translate .25s cubic-bezier(.3,1.4,.5,1)}
.dm-sw input:checked+.tg{background:var(--nx-bord)}
.dm-sw input:checked+.tg::after{translate:20px 0}
.dm-sw input:focus-visible+.tg{outline:3px solid var(--nx-gold);outline-offset:2px}
.dm-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dm-sum.one{grid-template-columns:1fr}
.dm-sum>div{background:#FBF6EB;border-radius:8px;padding:12px 14px}
.dm-sum small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-mute);margin-bottom:4px}
.dm-sum span,.dm-sum strong{font-family:var(--nx-font-head);font-size:17px;font-weight:600}
.dm-sum .tot{background:var(--nx-bord);color:#fff}
.dm-sum .tot small{color:rgba(255,255,255,.7)}
.dm-sum .tot strong{font-size:24px;font-variant-numeric:tabular-nums}
.dm-go{width:100%;font-family:var(--nx-font-head);font-weight:600;font-size:16px;background:var(--nx-bord);color:#fff;border:0;border-radius:6px;padding:15px;cursor:pointer;transition:background .2s,transform .2s}
.dm-go:hover:not(:disabled){background:var(--nx-bord-d);transform:translateY(-1px)}
.dm-go:disabled{opacity:.4;cursor:not-allowed}
.dm-mini{font-family:var(--nx-font-head);font-weight:600;font-size:13px;background:var(--nx-cream);color:var(--nx-bord);border:0;border-radius:99px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s}
.dm-mini:hover{background:var(--nx-bord);color:#fff}
.dm-mini.hot{background:var(--nx-bord);color:#fff}
.dm-ok{display:flex;gap:14px;align-items:flex-start;margin-top:14px;background:#EFF6E8;border-radius:8px;padding:14px 16px}
.dm-ok[hidden]{display:none}
.dm-ok.pop{animation:okPop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes okPop{from{opacity:0;scale:.92;translate:0 10px}}
.dm-ok i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;background:#2F7D32;color:#fff;display:grid;place-items:center;font-size:15px}
.dm-ok b{display:block;font-family:var(--nx-font-head)}
.dm-ok span{font-size:13.5px;color:#3d4a3a}
.dm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:14px}
.good{color:#2F7D32}.bad{color:#B3261E}
.dm-tbl{display:grid;gap:6px}
.g-r{display:grid;grid-template-columns:64px repeat(7,1fr) 44px;gap:6px;align-items:center;text-align:center}
.g-h span,.g-f span{font-size:12px;font-weight:600;color:var(--nx-mute)}
.g-f span.bad{color:#B3261E}
.g-r .nm{text-align:left;font-weight:600}
.cell{font-size:12px;font-weight:600;border:0;border-radius:6px;padding:10px 0;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.cell:active{transform:scale(.94)}
.cell.c0{background:#F3EEE2;color:#9C9484}
.cell.c1{background:var(--nx-bord);color:#fff}
.cell.c2{background:var(--nx-cream);color:var(--nx-bord);box-shadow:inset 0 0 0 1.5px var(--nx-bord)}
.g-r .hr{font-size:13px;font-weight:600}
.g-r .hr.bad{color:#B3261E}
.dm-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.dday{display:grid;gap:1px;justify-items:center;border:1px solid #E4D6BA;background:#fff;border-radius:8px;padding:10px 4px;cursor:pointer;transition:.2s}
.dday small{font-size:11px;color:var(--nx-mute);font-weight:600}
.dday b{font-family:var(--nx-font-head);font-size:20px}
.dday em{font-style:normal;font-size:11px;color:var(--nx-mute)}
.dday:hover{border-color:var(--nx-bord)}
.dday.on{background:var(--nx-bord);border-color:var(--nx-bord);color:#fff}
.dday.on small,.dday.on em{color:rgba(255,255,255,.75)}
.dm-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-bottom:14px}
.slot{font-weight:600;font-size:14px;border:1px solid #E4D6BA;background:#fff;border-radius:6px;padding:10px 0;cursor:pointer;transition:.2s}
.slot:hover:not(.off){border-color:var(--nx-bord);background:var(--nx-cream)}
.slot.on{background:var(--nx-bord);color:#fff;border-color:var(--nx-bord)}
.slot.off{background:#F3EEE2;color:#B8AF9B;text-decoration:line-through;cursor:not-allowed}
.dm-form{display:grid;grid-template-columns:1fr auto;gap:10px}
.dm-form input{border:1px solid #E4D6BA;border-radius:6px;padding:13px 14px;background:#fff;min-width:0}
.dm-form input:focus{outline:2px solid var(--nx-bord);outline-offset:1px}
.dm-form .dm-go{width:auto;padding:13px 22px}
.dm-list{display:grid;gap:10px;margin-bottom:14px}
.dm-li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;background:#FBF6EB;border-radius:8px;padding:14px 16px;transition:box-shadow .3s,background .3s}
.dm-li.run{background:var(--nx-cream);box-shadow:inset 0 0 0 1.5px var(--nx-bord)}
.dm-li.low{box-shadow:inset 0 0 0 1.5px #B3261E}
.dm-li b{display:block;font-family:var(--nx-font-head);font-size:16px}
.dm-li small{display:block;font-size:12px;color:var(--nx-mute)}
.dm-li .clk{font-family:var(--nx-font-head);font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.dm-li.run .clk{color:var(--nx-bord)}
.bar{display:block;height:5px;border-radius:3px;background:#E9DEC6;margin-top:8px;overflow:hidden}
.bar u{display:block;height:100%;background:var(--nx-bord);border-radius:3px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.dm-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.opt{text-align:left;display:grid;gap:2px;border:1px solid #E4D6BA;background:#fff;border-radius:8px;padding:14px;cursor:pointer;transition:.25s cubic-bezier(.2,.8,.2,1)}
.opt b{font-family:var(--nx-font-head);font-size:15px}
.opt small{font-size:12px;color:var(--nx-mute)}
.opt em{font-style:normal;font-weight:600;color:var(--nx-bord);font-size:14px}
.opt:hover{border-color:var(--nx-bord);transform:translateY(-2px)}
.opt.on{background:var(--nx-bord);border-color:var(--nx-bord);color:#fff}
.opt.on small{color:rgba(255,255,255,.75)}.opt.on em{color:var(--nx-cream)}
.dm-tl{display:flex;gap:3px;height:44px;margin-bottom:14px;background:#F3EEE2;border-radius:8px;overflow:hidden;align-items:stretch}
.dm-tl u{display:grid;place-items:center;background:var(--nx-bord);color:#fff;text-decoration:none;font-size:11px;font-weight:600;overflow:hidden;white-space:nowrap;animation:labIn .4s both}
.dm-tl u:nth-child(even){background:#8A2A2F}
.dm-tl em{margin:auto;font-style:normal;font-size:13px;color:var(--nx-mute)}
.dm-meter{margin-bottom:14px}
.dm-meter strong{font-family:var(--nx-font-head);font-size:30px;font-weight:600}
.dm-meter span{color:var(--nx-mute)}
.mb{display:block;height:10px;border-radius:5px;background:#EDE3CC;margin-top:8px;overflow:hidden}
.mb u{display:block;height:100%;width:0;background:var(--nx-bord);border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.2,1),background .3s}
.mb u.bad{background:#B3261E}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px}
.mem{font-weight:600;font-size:14px;border:1px solid #E4D6BA;background:#fff;border-radius:99px;padding:9px 16px;cursor:pointer;transition:.2s}
.mem:hover{border-color:var(--nx-bord)}
.mem.on{background:var(--nx-bord);border-color:var(--nx-bord);color:#fff}
.mem.on::before{content:"\2713\00a0 "}
.dm-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kc{background:#FBF6EB;border-radius:8px;padding:10px;display:grid;gap:8px;align-content:start;min-height:210px}
.kc h4{font-family:var(--nx-font-head);font-size:13px;font-weight:600;display:flex;justify-content:space-between;color:var(--nx-mute)}
.kc h4 i{font-style:normal;background:#fff;border-radius:99px;padding:0 8px}
.kt{text-align:left;font-size:13.5px;font-weight:500;background:#fff;border:1px solid #E4D6BA;border-radius:6px;padding:11px 10px;cursor:pointer;transition:.2s;animation:labIn .35s both}
.kt:hover{border-color:var(--nx-bord);transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(90,20,24,.6)}
@media (max-width:1000px){.lab-stage{grid-template-columns:1fr}.lab-win{min-height:0}}
@media (max-width:560px){.g-r{grid-template-columns:44px repeat(7,1fr) 30px;gap:3px}.cell{font-size:10px;padding:9px 0}.dm-sum{grid-template-columns:1fr}.dm-kan{grid-template-columns:1fr}.dm-form{grid-template-columns:1fr}.kc{min-height:0}.dm-li{grid-template-columns:1fr auto}.dm-li .clk{display:none}}
@media (prefers-reduced-motion:reduce){.lab.lab-sw .lab-info>*,.lab.lab-sw .lab-win,.kt,.dm-tl u{animation:none}}