:root{
  --kk1:#3D2BC9;--kk2:#7658ff;--kk3:#f4f0ff;--kk4:#f8f7fd;
  --kk5:#111118;--kk6:#656575;--kk7:#e6e2f3;--white:#fff;
  --shadow:0 18px 45px rgba(61,43,201,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f1f9;color:var(--kk5)}
.app{max-width:1240px;margin:28px auto;padding:0 18px}
.shell{background:#fff;border:1px solid var(--kk7);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.hero{padding:26px;background:linear-gradient(135deg,#fff 0%,#f6f2ff 55%,#ebe5ff 100%);border-bottom:1px solid var(--kk7);display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.logo{font-size:38px;line-height:1;font-weight:900;letter-spacing:-1.5px}.logo span{color:var(--kk1)}
.subtitle{margin-top:9px;color:var(--kk6);font-weight:700}
.internal{padding:9px 14px;border-radius:999px;background:#eee9ff;color:var(--kk1);font-size:12px;font-weight:900}
.main{display:grid;grid-template-columns:330px 1fr;gap:18px;padding:18px;background:var(--kk4)}
.panel{background:#fff;border:1px solid var(--kk7);border-radius:22px;padding:18px}
.panel-title{font-size:13px;font-weight:900;color:var(--kk6);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.product-list{display:grid;gap:10px}
.product-btn{width:100%;border:1.5px solid var(--kk7);background:#fff;border-radius:17px;padding:14px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:.18s ease}
.product-btn:hover{transform:translateY(-1px);border-color:var(--kk2)}
.product-btn.active{color:#fff;border-color:var(--kk1);background:linear-gradient(135deg,var(--kk1),var(--kk2));box-shadow:0 10px 22px rgba(61,43,201,.23)}
.product-icon{width:40px;height:40px;min-width:40px;border-radius:14px;background:#f1edff;display:flex;align-items:center;justify-content:center;font-size:20px}
.product-btn.active .product-icon{background:rgba(255,255,255,.2)}
.product-name{font-size:16px;font-weight:900;line-height:1.1}.product-count{font-size:12px;font-weight:700;opacity:.8;margin-top:4px}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.control-wide{grid-column:1 / -1}
label{display:block;font-size:12px;font-weight:900;color:var(--kk6);margin-bottom:6px}
select,input{width:100%;padding:13px 14px;border:1.5px solid var(--kk7);border-radius:14px;background:#fff;font:inherit;outline:none}
select:focus,input:focus{border-color:var(--kk2);box-shadow:0 0 0 4px rgba(118,88,255,.12)}
.profile-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.profile-box{width:90px}.profile-box input{padding:9px;font-size:13px;text-align:center}
.segment{min-width:180px;flex:1}.segment-inner{display:flex;background:#f1edff;border-radius:14px;padding:4px}
.segment-inner button{flex:1;border:0;border-radius:10px;padding:10px;background:transparent;color:var(--kk6);font-weight:900;cursor:pointer}
.segment-inner button.active{color:var(--kk1);background:#fff;box-shadow:0 2px 8px rgba(61,43,201,.14)}
.clear-btn,.copy-btn,.print-btn{border:1.5px solid var(--kk7);background:#fff;border-radius:13px;padding:11px 13px;font-weight:900;cursor:pointer}
.print-btn{background:var(--kk1);border-color:var(--kk1);color:#fff}
.result-wrap{padding:0 18px 18px;background:var(--kk4)}
.result{background:#fff;border:1px solid var(--kk7);border-radius:22px;overflow:hidden}
.result-head{padding:20px;background:linear-gradient(180deg,#fff,#fcfbff);border-bottom:1px solid var(--kk7)}
.result-title{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.04;font-weight:900;letter-spacing:-1.2px}
.spec{color:var(--kk6);line-height:1.45;font-size:14px}
.chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;padding:8px 10px;border-radius:999px;background:#eee9ff;color:var(--kk1);font-size:12px;font-weight:900}
.chip.grey{background:#f0f0f4;color:var(--kk6)}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:780px}
th{background:#2A1E91;color:#fff;text-align:left;padding:12px;font-size:12px}
td{padding:11px 12px;border-top:1px solid var(--kk7);vertical-align:top;font-size:14px}
tr:nth-child(even) td{background:#fcfbff}
.qty{font-size:21px;font-weight:900}.customer{font-size:17px;font-weight:900;white-space:nowrap}
.paper-price{font-size:12px;color:var(--kk6);margin-top:4px;white-space:nowrap}
.dtag{display:inline-block;background:#eee9ff;color:var(--kk1);border-radius:999px;padding:4px 7px;font-size:11px;font-weight:900}
.foot{padding:13px 18px;background:#fff;border-top:1px solid var(--kk7);color:var(--kk6);font-size:12px}
.empty{padding:34px;text-align:center;color:var(--kk6);font-weight:800}
.note{font-size:12px;color:var(--kk6);line-height:1.45;margin-top:10px}
@media(max-width:880px){.main{grid-template-columns:1fr}.controls{grid-template-columns:1fr}}

/* Produktbilder / Offline-Grafiken */
.product-thumb{width:72px;height:54px;min-width:72px;border-radius:14px;background:#f8f7fd;border:1px solid #e6e2f3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-text{flex:1;min-width:0}
.product-btn{align-items:center}
.product-btn .product-icon{margin-left:auto;width:34px;height:34px;min-width:34px;border-radius:12px;font-size:17px}
.product-btn.active .product-thumb{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.18)}
.product-btn.active .product-thumb img{filter:saturate(1.15) contrast(1.03)}
.result-head-visual{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}
.result-visual{border:1px solid var(--kk7);border-radius:20px;background:#f8f7fd;overflow:hidden;min-height:142px;display:flex;align-items:center;justify-content:center}
.result-visual img{width:100%;height:100%;max-height:180px;object-fit:cover;display:block}
.result-info{min-width:0}
@media(max-width:880px){.result-head-visual{grid-template-columns:1fr}.result-visual{max-height:180px}.product-thumb{width:64px;height:48px;min-width:64px}}
@media print{.product-thumb,.product-icon,.result-visual{print-color-adjust:exact;-webkit-print-color-adjust:exact}.main{display:none}.result-head-visual{grid-template-columns:160px 1fr}.actions{display:none}}


/* Größere Variantenvorschau + Maße */
.result-head-visual{grid-template-columns:minmax(380px, 520px) 1fr;gap:28px;align-items:start}
.result-side{display:flex;flex-direction:column;gap:12px}
.result-visual-large{min-height:320px;padding:12px}
.result-visual-large img{width:100%;height:100%;max-height:420px;object-fit:contain}
.visual-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.fact-card{border:1px solid var(--kk7);background:#faf9ff;border-radius:16px;padding:14px 15px}
.fact-card.highlight{background:linear-gradient(135deg,#f3efff 0%, #faf8ff 100%);border-color:#d8d0ff}
.fact-label{font-size:12px;font-weight:900;color:var(--kk6);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.fact-value{font-size:22px;line-height:1.12;font-weight:900;color:var(--kk5)}
.fact-sub{margin-top:5px;font-size:13px;color:var(--kk6);font-weight:700}
@media(max-width:1100px){.result-head-visual{grid-template-columns:1fr}.visual-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.result-visual-large{min-height:280px}}
@media(max-width:700px){.visual-facts{grid-template-columns:1fr}.fact-value{font-size:20px}}
@media print{.result-head-visual{grid-template-columns:320px 1fr}.result-visual-large{min-height:240px}}