:root{--ink0:#0e0e0c;--ink1:#141412;--ink2:#1a1a17;--ink3:#222220;--off:#f0ede6;--off2:#c8c5be;--off3:#8a8780;--accent:#e05c1a;--accent2:#c94f14;--border2:rgba(255,255,255,.07);--mono:"IBM Plex Mono",monospace;--display:"Bebas Neue",sans-serif;--body:"Instrument Sans","Helvetica Neue",sans-serif;--r:6px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--body);background:var(--ink0);color:var(--off);line-height:1.6;min-height:100vh}.nf-hero{max-width:1200px;margin:0 auto;padding:5rem 2rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.nf-hero-tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:8px}.nf-hero-tag:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block}.nf-hero h1{font-family:var(--display);font-size:clamp(3rem,6vw,5rem);color:var(--off);line-height:.95;letter-spacing:.02em;margin-bottom:1.25rem}.nf-hero h1 em{font-style:normal;color:var(--accent)}.nf-hero-desc{font-size:14px;color:var(--off3);line-height:1.75;margin-bottom:1.5rem;max-width:440px}.nf-price-block{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem}.nf-price-main{font-family:var(--display);font-size:2.5rem;color:var(--off)}.nf-price-sub{font-size:12px;color:var(--off3);font-family:var(--mono)}.nf-features{display:flex;flex-direction:column;gap:.6rem}.nf-feat{display:flex;align-items:center;gap:.75rem;font-size:13px;color:var(--off2)}.nf-feat:before{content:"\2713";color:var(--accent);font-size:11px;width:18px;height:18px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nf-hero-visual{display:flex;align-items:center;justify-content:center}.nf-hero-inlay{width:100%;aspect-ratio:16/10;border-radius:var(--r);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;position:relative;overflow:hidden}.nf-hero-inlay-inner{display:flex;flex-wrap:wrap;gap:8px;padding:1.5rem;align-items:center;justify-content:center}.nf-section{padding:3rem 2rem;max-width:1200px;margin:0 auto}.nf-sec-tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase;margin-bottom:.75rem}.nf-sec-h2{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.5rem);color:var(--off);letter-spacing:.03em;margin-bottom:1.75rem}.nf-color-section{background:var(--ink1);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:3rem 2rem}.nf-color-inner{max-width:1200px;margin:0 auto}.nf-cat-tabs{display:flex;gap:.5rem;margin-bottom:2rem}.nf-cat-tab{background:transparent;border:1px solid var(--border2);color:var(--off3);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1.25rem;cursor:pointer;transition:all .2s}.nf-cat-tab:hover{border-color:var(--accent);color:var(--accent)}.nf-cat-tab.active{background:var(--accent);border-color:var(--accent);color:var(--ink0)}.nf-color-panel{display:none}.nf-color-panel.active{display:block}.nf-color-grid{display:flex;flex-wrap:wrap;gap:.75rem}.nf-color-card{background:var(--ink2);border:1px solid var(--border2);padding:.75rem;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:90px}.nf-color-card:hover{border-color:var(--off3)}.nf-color-card.active{border-color:var(--accent)}.nf-swatch{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.1)}.nf-swatch-hawaii{background:conic-gradient(#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#ff6b6b);border:none}.nf-swatch-sued{background:conic-gradient(#00b4d8,#48cae4,#90e0ef,#ade8f4,#caf0f8,#00b4d8);border:none}.nf-swatch-neon{background:conic-gradient(#f72585,#7209b7,#3a0ca3,#4361ee,#4cc9f0,#f72585);border:none}.nf-swatch-silk{background:linear-gradient(135deg,#ff6b8a,#ff8c42,#7b68ee,#00b1b7,#ff6b8a)}.nf-color-name{font-size:11px;color:var(--off2);text-align:center;font-family:var(--mono);letter-spacing:.03em}.nf-color-price{font-size:10px;color:var(--off3);font-family:var(--mono)}.nf-spezial-note{font-size:12px;color:var(--off3);margin-top:1rem;line-height:1.6}.nf-config-section{background:var(--ink0);padding:3rem 2rem}.nf-config-inner{max-width:1200px;margin:0 auto}.nf-config-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem}.nf-config-hint{font-size:11px;color:var(--off3);font-family:var(--mono);text-align:right}.nf-config-frame{background:var(--ink1);border:1px solid var(--border2);overflow:hidden}.nf-config-toolbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.25rem;border-bottom:1px solid var(--border2);font-family:var(--mono);font-size:11px;color:var(--off3)}.nf-toolbar-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:.5rem}.nf-toolbar-badges{display:flex;gap:.75rem;align-items:center}.nf-badge{font-family:var(--mono);font-size:10px;color:var(--off3);border:1px solid var(--border2);padding:2px 8px}.nf-inlay-layout{display:grid;grid-template-columns:180px 1fr 180px}.nf-p-left,.nf-p-right{padding:1.25rem;border-right:1px solid var(--border2);background:var(--ink2)}.nf-p-right{border-right:none;border-left:1px solid var(--border2)}.nf-pt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--off3);margin-bottom:.75rem}.nf-bitem{display:flex;align-items:center;gap:.6rem;padding:.5rem .4rem;cursor:grab;border:1px solid transparent;margin-bottom:2px;transition:border-color .15s,background .15s;font-size:12px;color:var(--off2)}.nf-bitem:hover{background:var(--ink3);border-color:var(--border2)}.nf-bic{width:28px;height:28px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}.nf-bn{font-size:11px;color:var(--off);font-weight:600;line-height:1.2}.nf-bd{font-size:9px;color:var(--off3);font-family:var(--mono)}.nf-zoom-row{display:flex;gap:4px;margin-top:.5rem}.nf-zb{flex:1;background:var(--ink3);border:1px solid var(--border2);color:var(--off2);font-size:13px;padding:.3rem;cursor:pointer;transition:all .15s}.nf-zb:hover{background:var(--accent);border-color:var(--accent);color:#fff}.nf-canvas-col{padding:1rem;overflow:auto}.nf-clbl{display:flex;justify-content:space-between;font-size:10px;font-family:var(--mono);color:var(--off3);margin-bottom:.5rem}.nf-grid-outer{position:relative;display:inline-block;border:1px solid}.nf-placed-layer{position:absolute;top:0;left:0;pointer-events:none}.nf-pb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:move;pointer-events:all;-webkit-user-select:none;user-select:none;box-sizing:border-box}.nf-pb.sel{outline:2px solid var(--accent);outline-offset:1px}.nf-ctrl-w{position:absolute;top:-18px;left:50%;transform:translate(-50%);display:none;gap:3px;z-index:10}.nf-pb:hover .nf-ctrl-w,.nf-pb.sel .nf-ctrl-w{display:flex}.nf-ctrl{width:16px;height:16px;border:none;border-radius:2px;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}.nf-cr{background:var(--ink3);color:var(--off)}.nf-cd{background:#c62828;color:#fff}.nf-rb{position:absolute;bottom:2px;right:2px;font-size:7px;opacity:.6}.nf-fbar{height:4px;background:var(--ink3);border-radius:2px;margin-bottom:.4rem;overflow:hidden}.nf-fi{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}.nf-fl{font-size:10px;color:var(--off3);font-family:var(--mono);margin-bottom:1rem}.nf-srow{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--off2);padding:.3rem 0;border-bottom:1px solid var(--border2)}.nf-slbl{display:flex;align-items:center;gap:.4rem}.nf-scnt{font-family:var(--mono);color:var(--accent);font-size:11px}.nf-abt{width:100%;background:var(--ink3);border:1px solid var(--border2);color:var(--off2);font-family:var(--mono);font-size:10px;letter-spacing:.05em;padding:.5rem;cursor:pointer;margin-top:.4rem;transition:all .2s}.nf-abt:hover{border-color:var(--off3);color:var(--off)}.nf-abt.danger{color:#e57373}.nf-abt.danger:hover{border-color:#e57373;color:#ff5252}.nf-divider{border:none;border-top:1px solid var(--border2);margin:.75rem 0}.nf-how-section{background:var(--ink1);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:3rem 2rem}.nf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border2);max-width:1200px;margin:0 auto}.nf-step{background:var(--ink1);padding:2rem 1.5rem}.nf-step-num{font-family:var(--display);font-size:3rem;color:var(--border2);line-height:1;margin-bottom:.75rem}.nf-step-title{font-size:14px;font-weight:700;color:var(--off);margin-bottom:.4rem}.nf-step-desc{font-size:12px;color:var(--off3);line-height:1.6}.nf-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#0e0e0cf2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;padding:.875rem 2rem;gap:1.5rem}.nf-cta-left{display:flex;align-items:center;gap:2rem}.nf-cta-swatch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.15);flex-shrink:0}.nf-cta-info{display:flex;flex-direction:column}.nf-cta-lbl{font-size:9px;font-family:var(--mono);letter-spacing:.1em;color:var(--off3);text-transform:uppercase}.nf-cta-val{font-size:12px;color:var(--off);font-weight:600}.nf-cta-right{display:flex;align-items:center;gap:.75rem}.nf-cta-price{font-family:var(--display);font-size:1.6rem;color:var(--off);white-space:nowrap}.nf-cta-price span{font-family:var(--body);font-size:11px;color:var(--off3)}.nf-btn-exp{background:transparent;border:1px solid var(--border2);color:var(--off3);font-family:var(--mono);font-size:11px;padding:.5rem .875rem;cursor:pointer;transition:all .2s}.nf-btn-exp:hover{border-color:var(--off3);color:var(--off)}.nf-btn-add{background:var(--accent);border:none;color:#fff;font-family:var(--body);font-size:14px;font-weight:700;padding:.6rem 1.75rem;cursor:pointer;transition:background .2s}.nf-btn-add:hover{background:var(--accent2)}.nf-btn-add:disabled{opacity:.5;cursor:not-allowed}.pb-spacer{height:80px}#toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%);background:var(--ink3);border:1px solid var(--border2);color:var(--off);font-size:13px;padding:.6rem 1.5rem;pointer-events:none;opacity:0;transition:opacity .25s;z-index:300;font-family:var(--mono)}#toast.show{opacity:1}#drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85}@media(max-width:900px){.nf-hero{grid-template-columns:1fr;gap:2rem}.nf-hero-visual{display:none}.nf-inlay-layout{grid-template-columns:1fr}.nf-p-left,.nf-p-right{border:none;border-bottom:1px solid var(--border2)}.nf-steps{grid-template-columns:1fr 1fr}.nf-cta-left{display:none}}@media(max-width:480px){.nf-steps{grid-template-columns:1fr}.nf-sticky-cta{padding:.75rem 1rem}}.nf-color-card{position:relative}.nf-color-card.vorbestellung .nf-swatch{opacity:.45}.nf-color-card.vorbestellung .nf-color-name{text-decoration:line-through;text-decoration-color:var(--accent);opacity:.6}.nf-color-card.vorbestellung .nf-color-price{color:var(--accent);opacity:.8}.nf-color-card.vorbestellung{border-color:#e05c1a40}.nf-color-card.vorbestellung:hover{border-color:var(--accent)}.nf-color-card.ausverkauft{opacity:.35;cursor:not-allowed;pointer-events:none}.nf-color-card.ausverkauft .nf-color-name{text-decoration:line-through}.nf-color-card .nf-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ink3);border:1px solid var(--border2);color:var(--off2);font-size:11px;font-family:var(--mono);white-space:nowrap;padding:.4rem .75rem;pointer-events:none;z-index:50;box-shadow:0 4px 16px #0006}.nf-color-card .nf-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--ink3)}.nf-color-card:hover .nf-tooltip{display:block}.nf-color-card.ausverkauft:hover .nf-tooltip{display:none}
/*# sourceMappingURL=/cdn/shop/t/241/assets/inlay-generator.css.map */
