:root {
      --bg:#16181f; --panel:#1e2136; --panel2:#222538; --card:#252840;
      --accent:#e53935; --accent2:#b71c1c;
      --text:#e2e4f0; --text2:#8890b5; --border:rgba(255,255,255,0.08);
      --green:#4caf50; --green2:#2e7d32; --blue:#1565c0; --blue2:#0d47a1;
      --purple:#4527a0; --amber:#ff9800; --teal:#00695c;
    }
    *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;}
    input,textarea,select,[contenteditable]{user-select:text;}
    body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--bg);color:var(--text);
         height:100vh;overflow:hidden;display:flex;flex-direction:column;touch-action:manipulation;}
    /* scrollbare Bereiche per Touch scrollbar machen */
    .category-list,.product-grid,.cart-items,.history-list,.bottom-bar-btns,
    .modal-overlay,.modal-content,[style*="overflow-y:auto"],[style*="overflow-y: auto"]{
      touch-action:pan-y;-webkit-overflow-scrolling:touch;}

    /* ── HEADER ─────────────────────────────────────── */
    .header{background:var(--panel);border-bottom:2px solid var(--accent);flex-shrink:0;}
    .header-top{display:flex;align-items:center;gap:10px;padding:7px 12px;}
    .header-logo{height:34px;width:34px;object-fit:contain;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;}
    .header-logo-placeholder{height:34px;width:34px;background:var(--accent);border-radius:6px;
      display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;cursor:pointer;-webkit-user-select:none;user-select:none;}
    #headerLogo{cursor:pointer;}
    .header-title{flex:1;}
    .header-title h1{font-size:15px;font-weight:700;line-height:1.2;}
    .header-title small{font-size:11px;color:var(--text2);}
    .header-bar{background:rgba(0,0,0,0.25);padding:4px 12px;display:flex;align-items:center;gap:6px;font-size:12px;}
    .header-info{color:var(--text2);flex:1;}
    .header-info span{margin-right:10px;}
    .hbtn{background:rgba(255,255,255,0.08);border:1px solid var(--border);color:var(--text);
      padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;}
    .station-pick-btn{width:120px;height:90px;border-radius:10px;border:2px solid var(--border);background:var(--bg2);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;transition:border-color .15s,background .15s;}
    .station-pick-btn:hover{border-color:var(--navy);background:var(--bg3);}
    .station-pick-btn.selected{border-color:var(--navy);background:var(--navy);color:#fff;}
    .hbtn:hover{background:rgba(255,255,255,0.18);}
    .hbtn.red{background:var(--accent);border-color:var(--accent2);}
    .hbtn.red:hover{background:var(--accent2);}
    .hbtn.amber{background:rgba(255,152,0,0.4);border-color:var(--amber);}
    .hbtn.amber:hover{background:var(--amber);}
    .hbtn.green{background:rgba(76,175,80,0.3);border-color:#4caf50;}
    .hbtn.green:hover,.hbtn.green.on{background:#4caf50;color:#fff;}
    /* Drucker-Status Topbar */
    #printerStatusDot{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
      padding:3px 8px;border-radius:4px;cursor:default;transition:background .3s,color .3s;
      background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text2);}
    #printerStatusDot.error{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);color:#fca5a5;}
    #printerStatusDot.ok{background:rgba(76,175,80,.18);border-color:rgba(76,175,80,.5);color:#86efac;}
    #printerStatusDot .pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.25);}
    #printerStatusDot.error .pdot{background:#ef4444;box-shadow:0 0 5px #ef4444;}
    #printerStatusDot.ok .pdot{background:#4caf50;}
    /* Server-Verbindung Banner */
    #serverConnBanner{display:none;background:#7c3aed;color:#fff;font-size:12px;font-weight:600;
      text-align:center;padding:5px;flex-shrink:0;}

    /* ── MAIN ───────────────────────────────────────── */
    .main{display:flex;flex:1;overflow:hidden;}

    /* ── SIDEBAR / KATEGORIEN ───────────────────────── */
    .sidebar{width:150px;background:var(--panel);display:flex;flex-direction:column;
      gap:3px;padding:6px 5px;overflow-y:auto;flex-shrink:0;border-right:1px solid var(--border);
      transition:width .2s ease;}
    .sidebar.collapsed{width:36px;padding:6px 3px;overflow:hidden;}
    .sidebar.collapsed .cat-btn,.sidebar.collapsed .sbtn,
    .sidebar.collapsed .sidebar-divider,.sidebar.collapsed #collectionSidebarSection{display:none;}
    #sidebarToggleBtn{width:100%;padding:6px 0;background:rgba(255,255,255,.07);border:1px solid var(--border);
      border-radius:7px;color:var(--text2);font-size:14px;cursor:pointer;text-align:center;
      flex-shrink:0;touch-action:manipulation;transition:background .15s;}
    #sidebarToggleBtn:hover{background:rgba(255,255,255,.15);color:var(--text);}
    .sidebar.collapsed #sidebarToggleBtn{border-radius:5px;}
    .sidebar::-webkit-scrollbar{width:3px;}
    .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}
    .cat-btn{width:100%;padding:9px 6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);
      border-radius:7px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;
      text-align:center;transition:background .15s,color .15s;line-height:1.3;min-height:44px;
      touch-action:manipulation;}
    .cat-btn:hover{background:rgba(255,255,255,0.1);color:var(--text);}
    .cat-btn.active{background:var(--accent);border-color:var(--accent2);color:#fff;}
    .cat-btn:active,.cat-btn.pressing{background:rgba(255,255,255,0.2)!important;transition:none;}
    .sidebar-divider{height:1px;background:var(--border);margin:2px 0;flex-shrink:0;}
    .sbtn{width:100%;padding:12px 6px;border-radius:7px;font-size:13px;font-weight:600;
      cursor:pointer;text-align:center;transition:background .15s;min-height:58px;line-height:1.4;border:1px solid;touch-action:manipulation;}
    .sbtn:active,.sbtn.pressing{filter:brightness(1.4);transition:none;}
    .sbtn-member{background:rgba(33,150,243,0.15);border-color:rgba(33,150,243,0.5);color:#90caf9;}
    .sbtn-member:hover,.sbtn-member.active{background:#1565c0;border-color:#1565c0;color:#fff;}
    .sbtn-special{background:rgba(255,152,0,0.15);border-color:rgba(255,152,0,0.5);color:#ffcc80;}
    .sbtn-special:hover,.sbtn-special.active{background:#e65100;border-color:#e65100;color:#fff;}
    .sbtn-tables{background:rgba(76,175,80,0.15);border-color:rgba(76,175,80,0.5);color:#a5d6a7;}
    .sbtn-tables:hover{background:#2e7d32;border-color:#2e7d32;color:#fff;}
    .sbtn-history{background:rgba(96,125,139,0.15);border-color:rgba(96,125,139,0.5);color:#90a4ae;}
    .sbtn-history:hover,.sbtn-history.active{background:#37474f;border-color:#37474f;color:#fff;}
    .sbtn-waiter{background:rgba(124,77,255,0.15);border-color:rgba(124,77,255,0.5);color:#ce93d8;}
    .sbtn-waiter:hover,.sbtn-waiter.active{background:#4527a0;border-color:#4527a0;color:#fff;}
    .deposit-returned-badge{font-size:10px;color:#80deea;font-weight:600;margin-top:2px;}

    /* ── PRODUKT-GRID ───────────────────────────────── */
    .product-area{flex:1;display:flex;flex-direction:column;overflow:hidden;}
    .product-area-bar{display:none;align-items:center;justify-content:flex-end;
      padding:4px 8px 0;gap:6px;flex-shrink:0;}
    .product-area-bar.visible{display:flex;}
    .sort-toggle-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.7);font-size:12px;padding:4px 10px;border-radius:6px;cursor:pointer;}
    .sort-toggle-btn:hover{background:rgba(255,255,255,.16);}
    .sort-toggle-btn.active{background:rgba(76,175,80,.25);border-color:rgba(76,175,80,.6);color:#81c784;}
    .sort-hint{font-size:11px;color:rgba(255,255,255,.35);display:none;}
    .sort-hint.visible{display:block;}
    .product-grid{flex:1;overflow-y:auto;padding:8px;
      display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;align-content:start;}
    .product-grid.sort-mode{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
    .product-grid::-webkit-scrollbar{width:4px;}
    .product-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:2px;}
    .product-card{background:var(--card);border-radius:9px;overflow:hidden;cursor:pointer;
      border:2px solid transparent;transition:border-color .15s,box-shadow .15s;
      display:flex;flex-direction:column;min-height:115px;touch-action:manipulation;}
    .product-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(229,57,53,.25);}
    .product-card:active,.product-card.pressing{transform:scale(.95);transition:none;}
    /* Sort-Modus */
    .product-card.sortable{cursor:grab;position:relative;}
    .product-card.sortable::after{content:'⠿';position:absolute;top:4px;right:5px;
      font-size:14px;color:rgba(255,255,255,.4);pointer-events:none;}
    .product-card.sortable:hover{border-color:rgba(76,175,80,.6);box-shadow:none;transform:none;}
    .product-card.drag-over{border-color:#4caf50!important;box-shadow:0 0 12px rgba(76,175,80,.5)!important;transform:scale(1.03)!important;}
    .product-card.dragging{opacity:.35;}
    .product-card.out-of-stock{opacity:.4;cursor:not-allowed;}
    .product-card.out-of-stock:hover{transform:none;border-color:transparent;box-shadow:none;}
    .product-card.var-price{border-color:rgba(255,183,77,.4);}
    .product-card.var-price:hover{border-color:#ffb74d;box-shadow:0 4px 14px rgba(255,152,0,.25);}
    .product-emoji{width:100%;height:64px;display:flex;align-items:center;justify-content:center;
      font-size:30px;background:rgba(255,255,255,0.04);flex-shrink:0;}
    .product-img{width:100%;height:64px;object-fit:cover;background:var(--panel);flex-shrink:0;}
    .product-info{padding:7px 8px;flex:1;display:flex;flex-direction:column;gap:3px;}
    .product-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.25;
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .product-price{font-size:15px;font-weight:800;color:#69f069;}
    .product-price.varprice{color:#ffb74d;font-size:12px;font-weight:600;}
    .product-deposit{font-size:10px;color:var(--text2);}
    .product-stock{font-size:10px;padding:2px 5px;border-radius:7px;display:inline-block;margin-top:2px;font-weight:600;}
    .stock-ok{background:rgba(76,175,80,.2);color:#81c784;}
    .stock-low{background:rgba(255,152,0,.2);color:#ffb74d;}
    .stock-none{background:rgba(229,57,53,.2);color:#ef9a9a;}

    /* ── WARENKORB (rechts) ──────────────────────────── */
    .cart-panel{width:390px;background:var(--panel2);display:flex;flex-direction:column;
      border-left:1px solid var(--border);flex-shrink:0;}

    /* Infobalken */
    .cart-bar{padding:6px 10px;display:flex;align-items:center;justify-content:space-between;
      min-height:32px;border-bottom:1px solid var(--border);font-size:11px;}
    .cart-bar.waiter-bar{background:rgba(76,175,80,.12);border-color:rgba(76,175,80,.3);
      cursor:pointer;}
    .cart-bar.waiter-bar:hover{background:rgba(76,175,80,.22);}
    .cart-bar.waiter-bar.table-selected{background:rgba(76,175,80,.25);border-color:rgba(76,175,80,.6);}
    .cart-bar.member-bar{background:rgba(33,150,243,.08);}
    .cart-bar.member-bar.active{background:rgba(33,150,243,.2);border-color:rgba(33,150,243,.4);}
    .cart-bar.special-bar{background:rgba(255,152,0,.08);border-color:rgba(255,152,0,.25);display:none;}
    .cart-bar.helper-bar{background:rgba(156,39,176,.08);border-color:rgba(156,39,176,.25);display:none;}
    .cart-bar.helper-bar.active{background:rgba(156,39,176,.22);border-color:rgba(156,39,176,.5);}
    .cart-bar.dv-bar{background:rgba(0,188,212,.08);border-color:rgba(0,188,212,.25);display:none;}
    .cart-bar.dv-bar.active{background:rgba(0,188,212,.22);border-color:rgba(0,188,212,.5);}
    .bar-label{font-weight:700;font-size:12px;}
    .bar-label.green{color:#81c784;}
    .bar-label.blue{color:#90caf9;}
    .bar-label.amber{color:#ffcc80;}
    .bar-label.purple{color:#ce93d8;}
    .bar-label.cyan{color:#80deea;}
    .bar-sub{color:var(--text2);font-size:10px;}
    .bar-clear{color:var(--accent);cursor:pointer;font-weight:700;font-size:12px;}

    /* Cart-Items */
    .cart-items{flex:1;overflow-y:auto;padding:4px 6px;min-height:50px;}
    .cart-items::-webkit-scrollbar{width:3px;}
    .cart-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:2px;}
    .cart-empty{text-align:center;color:var(--text2);font-size:12px;padding:18px 8px;}
    .cart-item{display:flex;align-items:center;gap:4px;padding:5px 3px;border-bottom:1px solid var(--border);}
    .cart-item:last-child{border-bottom:none;}
    .cart-item-name{flex:1;font-size:15px;color:var(--text);line-height:1.3;min-width:0;}
    .cart-item-sub{font-size:12px;color:var(--text2);}
    .qty-btn{width:30px;height:30px;border-radius:50%;border:none;font-size:16px;font-weight:700;
      cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .qty-minus{background:rgba(255,255,255,0.08);color:var(--text);}
    .qty-minus:hover{background:rgba(229,57,53,.3);color:#ef9a9a;}
    .qty-num{font-size:15px;font-weight:700;min-width:22px;text-align:center;color:var(--text);}
    .qty-plus{background:var(--accent);color:#fff;}
    .qty-plus:hover{background:var(--accent2);}
    .cart-item-price{font-size:15px;font-weight:700;color:#69f069;min-width:56px;text-align:right;flex-shrink:0;}
    .cart-item-del{width:24px;height:24px;border-radius:50%;border:none;
      background:rgba(229,57,53,.2);color:#ef9a9a;font-size:11px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .cart-item-del:hover{background:rgba(229,57,53,.5);}

    /* Summen */
    .cart-footer{border-top:1px solid var(--border);padding:5px 10px;flex-shrink:0;}
    .cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
    .cart-total-label{font-size:11px;color:var(--text2);}
    .cart-total-val{font-size:11px;font-weight:600;color:var(--text);}
    .cart-grand-row{display:flex;justify-content:space-between;align-items:center;margin-top:3px;}
    .cart-grand-label{font-size:14px;font-weight:700;}
    .cart-grand-val{font-size:24px;font-weight:800;color:#69f069;}

    /* Numpad */
    .numpad-toggle-btn{background:none;border:none;color:var(--text2);font-size:16px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0;}
    .numpad-toggle-btn:hover{color:#fff;}
    .numpad-grid.np-collapsed{display:none;}
    .numpad-display{background:rgba(0,0,0,.3);border-top:1px solid var(--border);
      padding:6px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
    .numpad-label{font-size:11px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
    .numpad-val{font-size:28px;font-weight:800;color:#fff;font-family:monospace;min-width:44px;text-align:right;}
    .numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
      padding:4px 6px;flex-shrink:0;background:rgba(0,0,0,.18);}
    .np-btn{height:54px;background:var(--card);border:1px solid var(--border);border-radius:7px;
      color:var(--text);font-size:22px;font-weight:700;cursor:pointer;
      transition:all .1s;display:flex;align-items:center;justify-content:center;}
    .np-btn:hover{background:rgba(255,255,255,.12);}
    .np-btn:active{background:rgba(255,255,255,.22);transform:scale(.95);}
    .np-btn.np-clr{color:#ef9a9a;font-size:13px;font-weight:700;}
    .np-btn.np-del{color:#ffb74d;font-size:20px;}

    /* ── BOTTOM-BAR ─────────────────────────────────── */
    .bottom-bar{height:84px;background:var(--panel);border-top:2px solid var(--accent);
      display:flex;align-items:stretch;flex-shrink:0;overflow:hidden;}
    .bottom-bar-btns{flex:1;display:flex;align-items:stretch;overflow-x:auto;
      gap:3px;padding:4px;scroll-behavior:smooth;}
    .bottom-bar-btns::-webkit-scrollbar{height:2px;}
    .bottom-bar-btns::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:1px;}
    .bbar-btn{flex:1;min-width:100px;max-width:200px;border:none;border-radius:8px;
      font-size:13px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:4px;line-height:1.2;
      transition:filter .15s,transform .1s;position:relative;
      -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
    .bbar-btn:hover{filter:brightness(1.18);}
    .bbar-btn:active,.bbar-btn.pressing{transform:scale(.93);transition:none;}
    .bbar-btn:disabled{opacity:.35;cursor:not-allowed;filter:none;}
    .bbar-icon{font-size:22px;line-height:1;}
    /* Zahlung */
    .bbar-cash{background:#2e7d32;color:#fff;}
    .bbar-card{background:#1565c0;color:#fff;}
    .bbar-member{background:#4527a0;color:#fff;}
    .bbar-member.act-tisch-active{background:#2e7d32;color:#fff;}
    /* Aktionen */
    .bbar-storno{background:#424242;color:#ccc;}
    .bbar-drawer{background:#bf360c;color:#fff;}
    .bbar-pfand{background:#00695c;color:#b2dfdb;}
    .bbar-helper{background:#6d28d9;color:#fff;}
    /* Navigation */
    .bbar-mitglied{background:rgba(33,150,243,.2);border:1px solid rgba(33,150,243,.5);color:#90caf9;}
    .bbar-mitglied.active,.bbar-mitglied:hover{background:#1565c0;border-color:#1565c0;color:#fff;}
    .bbar-special{background:rgba(255,152,0,.18);border:1px solid rgba(255,152,0,.5);color:#ffcc80;}
    .bbar-special.active,.bbar-special:hover{background:#e65100;border-color:#e65100;color:#fff;}
    .bbar-tables{background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.5);color:#a5d6a7;}
    .bbar-tables:hover{background:#2e7d32;border-color:#2e7d32;color:#fff;}
    .bbar-history{background:rgba(96,125,139,.15);border:1px solid rgba(96,125,139,.5);color:#90a4ae;}
    .bbar-history.active,.bbar-history:hover{background:#37474f;border-color:#37474f;color:#fff;}
    /* Sort-Modus */
    .bottom-bar.sort-active .bbar-btn{cursor:grab;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);}
    .bottom-bar.sort-active .bbar-btn::after{content:'⠿';position:absolute;top:4px;right:5px;
      font-size:12px;color:rgba(255,255,255,.4);pointer-events:none;}
    .bbar-btn.bbar-dragging{opacity:.15;}
    /* Sort-Toggle */
    .bbar-sort-btn{width:48px;min-width:48px;border:none;border-left:1px solid var(--border);
      background:rgba(255,255,255,.06);color:var(--text2);font-size:20px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;transition:background .15s;}
    .bbar-sort-btn:hover{background:rgba(255,255,255,.12);color:var(--text);}
    .bbar-sort-btn.on{background:rgba(76,175,80,.25);color:#81c784;}

    /* ── ACT-BTN (Modal-Buttons, z.B. Tisch-Abrechnung) ─ */
    .act-btn{border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:3px;line-height:1.2;transition:filter .15s;}
    .act-btn:hover{filter:brightness(1.15);}
    .act-btn:active{transform:scale(.96);}
    .act-btn:disabled{opacity:.35;cursor:not-allowed;filter:none;}
    .act-icon{font-size:18px;line-height:1;}
    .act-cash{background:#2e7d32;color:#fff;}
    .act-card{background:#1565c0;color:#fff;}
    .act-member{background:#4527a0;color:#fff;}

    /* ── HISTORY-MODAL ──────────────────────────────── */
    .history-modal-header{display:flex;align-items:center;justify-content:space-between;
      padding:13px 16px;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);}
    .history-modal-title{font-size:14px;font-weight:700;color:var(--text);}
    .history-modal-actions{display:flex;gap:6px;align-items:center;}
    .history-icon-btn{background:none;border:1px solid var(--border);color:var(--text2);border-radius:6px;
      width:32px;height:32px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
    .history-icon-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
    .history-filter-label{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--text2);
      font-size:11px;border:1px solid var(--border);border-radius:6px;padding:5px 9px;height:32px;}
    .history-filter-label input{width:13px;height:13px;accent-color:var(--accent);}
    .history-list{overflow-y:auto;padding:10px;}
    .history-list::-webkit-scrollbar{width:4px;}
    .history-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px;}
    .history-entry{background:rgba(255,255,255,.05);border:1px solid var(--border);
      border-radius:8px;padding:10px 13px;margin-bottom:7px;}
    .history-entry.cancelled{opacity:.35;}
    .history-entry-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}
    .history-nums{display:flex;flex-wrap:wrap;gap:4px;}
    .h-num-tag{background:var(--accent);color:#fff;font-size:11px;font-weight:700;
      padding:2px 7px;border-radius:4px;}
    .h-num-tag.cancelled{background:#555;}
    .history-time{font-size:11px;color:var(--text2);white-space:nowrap;}
    .history-items-text{font-size:12px;color:var(--text2);margin-bottom:4px;line-height:1.4;}
    .history-total{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;}
    .history-btn-row{display:flex;gap:6px;margin-top:2px;}
    .history-storno-btn{background:rgba(229,57,53,.2);border:1px solid rgba(229,57,53,.4);
      color:#ef9a9a;font-size:13px;padding:8px 12px;border-radius:6px;cursor:pointer;flex:1;
      min-height:38px;font-weight:600;}
    .history-storno-btn:hover,.history-storno-btn:active{background:rgba(229,57,53,.45);}
    .history-reprint-btn{background:rgba(21,101,192,.25);border:1px solid rgba(21,101,192,.5);
      color:#90caf9;font-size:13px;padding:8px 12px;border-radius:6px;cursor:pointer;flex:1;
      min-height:38px;font-weight:600;}
    .history-reprint-btn:hover,.history-reprint-btn:active{background:rgba(21,101,192,.45);}

    /* ── BANNERS ────────────────────────────────────── */
    .banner{text-align:center;padding:6px 14px;font-size:12px;font-weight:700;flex-shrink:0;}

    /* ── MODALS ─────────────────────────────────────── */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;
      align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(3px);}
    @keyframes spin{to{transform:rotate(360deg)}}
    .sumup-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#81c784;border-radius:50%;animation:spin .9s linear infinite;margin:0 auto 20px;}
    #sumupOverlay{z-index:1500;}
    .sumup-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:36px 32px;text-align:center;max-width:440px;width:92%;}
    .sumup-icon{font-size:52px;margin-bottom:10px;}
    .sumup-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px;}
    .sumup-amount{font-size:38px;font-weight:800;color:#81c784;margin-bottom:8px;letter-spacing:-1px;}
    .sumup-hint{font-size:12px;color:var(--text2);margin-bottom:22px;}
    .sumup-cancel{background:rgba(229,57,53,.15);border:1px solid rgba(229,57,53,.4);color:#ef9a9a;padding:9px 22px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;}
    .hidden{display:none!important;}
    .modal{background:#252840;border:1px solid rgba(255,255,255,.1);border-radius:14px;
      padding:20px;width:90%;max-width:460px;max-height:88vh;overflow-y:auto;
      box-shadow:0 20px 60px rgba(0,0,0,.6);}
    .modal h2{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px;}
    .modal h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;}
    .form-group{margin-bottom:11px;}
    .form-group label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:3px;}
    .form-group input,.form-group select{width:100%;padding:8px 11px;background:#1e2136;
      border:1.5px solid rgba(255,255,255,.12);border-radius:6px;font-size:13px;color:var(--text);outline:none;}
    .form-group input:focus,.form-group select:focus{border-color:#90caf9;}
    .form-group select option{background:#252840;}
    .modal-actions{display:flex;gap:7px;margin-top:12px;justify-content:flex-end;flex-wrap:wrap;}
    /* Payment modal: 2-Spalten-Layout ab 700 px (Tablet) */
    @media(min-width:700px){
      #paymentModal .modal{max-width:min(820px,94vw);max-height:92vh;overflow-y:visible;display:flex;flex-direction:row;gap:20px;align-items:flex-start;padding:20px;}
      #paymentModal .pay-main{flex:1;min-width:0;overflow-y:auto;max-height:80vh;}
      #paymentModal .pay-sidebar{width:210px;flex-shrink:0;display:flex;flex-direction:column;gap:0;}
      #paymentModal .pay-actions{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;margin-top:8px;}
      #paymentModal .pay-actions button{width:100%;text-align:center;padding:11px 16px;font-size:14px;}
    }
    .btn-primary{background:#1565c0;color:#fff;border:none;padding:8px 16px;
      border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;}
    .btn-primary:hover{background:#0d47a1;}
    .btn-secondary{background:rgba(255,255,255,.1);color:var(--text);border:1px solid var(--border);
      padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;}
    .btn-secondary:hover{background:rgba(255,255,255,.18);}
    .btn-danger{background:var(--accent);color:#fff;border:none;padding:8px 16px;
      border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;}
    .btn-danger:hover{background:var(--accent2);}

    /* ── Sperrbildschirm (macOS-Style) ──────────────────────────────────────── */
    #lockScreen{
      position:fixed;inset:0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 40%,rgba(80,30,160,.45) 0%,transparent 70%),
        radial-gradient(ellipse 70% 50% at 85% 20%,rgba(20,60,180,.5) 0%,transparent 65%),
        radial-gradient(ellipse 60% 70% at 50% 90%,rgba(0,80,140,.35) 0%,transparent 60%),
        linear-gradient(160deg,#0b0b1c 0%,#0d1830 50%,#0b0e1a 100%);
      z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;
      overflow:hidden;
      font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
    }
    #lockScreen.hidden{display:none!important;}

    /* Clock */
    .ls-clock{text-align:center;margin-bottom:28px;user-select:none;}
    .ls-clock-time{font-size:88px;font-weight:200;letter-spacing:-3px;line-height:1;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);}
    .ls-clock-date{font-size:17px;font-weight:400;color:rgba(255,255,255,.72);margin-top:8px;}

    /* 2-Spalten-Layout für PIN-Modi */
    .lock-pin-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;}
    .lock-pin-left,.lock-pin-right{display:flex;flex-direction:column;align-items:center;}

    /* Logo (circle) for resume mode */
    .lock-logo-placeholder{width:120px;height:120px;border-radius:50%;
      background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 100%);
      border:2px solid rgba(255,255,255,.28);
      display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:800;color:#fff;
      box-shadow:0 4px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);}
    .lock-logo{width:120px;height:120px;object-fit:contain;border-radius:50%;}

    /* PIN dots */
    .pin-display{display:flex;gap:22px;justify-content:center;align-items:center;height:22px;margin-bottom:12px;}
    .pin-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent;
      transition:background .12s,border-color .12s,box-shadow .12s;}
    .pin-dot.filled{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);}
    .pin-dot.error{background:#ff5a5a;border-color:#ff7979;box-shadow:0 0 10px rgba(255,70,70,.5);}
    .lock-error{font-size:14px;color:rgba(255,130,130,.9);min-height:22px;margin-bottom:16px;text-align:center;}

    /* Circular numpad */
    .pin-pad{display:grid;grid-template-columns:repeat(3,94px);gap:13px;}
    .pin-key{width:94px;height:94px;border-radius:50%;
      background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);
      color:#fff;font-size:34px;font-weight:300;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:background .12s,transform .1s;-webkit-tap-highlight-color:transparent;
      backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
      font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;user-select:none;}
    .pin-key:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28);}
    .pin-key:active{transform:scale(.88);background:rgba(255,255,255,.32);}
    .pin-key.ghost{background:transparent;border-color:transparent;font-size:24px;color:rgba(255,255,255,.65);}
    .pin-key.ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}

    /* User name in pin mode */
    .ls-pin-name{font-size:24px;font-weight:400;color:#fff;margin-bottom:16px;text-shadow:0 1px 10px rgba(0,0,0,.4);margin-top:12px;}
    .ls-subtitle{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:18px;text-align:center;}

    /* Switch link */
    .lock-switch-btn{margin-top:20px;background:none;border:none;
      color:rgba(255,255,255,.5);font-size:16px;font-family:inherit;
      cursor:pointer;padding:10px 22px;border-radius:24px;transition:color .2s,background .2s;}
    .lock-switch-btn:hover{color:#fff;background:rgba(255,255,255,.1);}

    /* User grid */
    .ls-user-label{font-size:14px;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:.8px;
      text-transform:uppercase;margin-bottom:28px;text-align:center;}
    .lock-user-list{display:flex;flex-wrap:wrap;justify-content:center;gap:46px 60px;
      max-width:1000px;max-height:60vh;overflow-y:auto;padding:8px;}
    .lock-user-item{display:flex;flex-direction:column;align-items:center;gap:14px;
      cursor:pointer;-webkit-tap-highlight-color:transparent;
      background:none;border:none;color:#fff;font-family:inherit;
      transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
    .lock-user-item:hover{transform:scale(1.07);}
    .lock-user-item:active{transform:scale(.96);}
    .lu-av{width:112px;height:112px;border-radius:50%;
      background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 100%);
      border:2px solid rgba(255,255,255,.28);
      display:flex;align-items:center;justify-content:center;font-size:46px;
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      box-shadow:0 4px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);
      transition:box-shadow .2s;}
    .lock-user-item:hover .lu-av{box-shadow:0 0 0 4px rgba(255,255,255,.45),0 8px 32px rgba(0,0,0,.5);}
    .lu-nm{font-size:18px;font-weight:500;color:rgba(255,255,255,.88);
      text-shadow:0 1px 6px rgba(0,0,0,.5);max-width:160px;text-align:center;}

    /* Switch-user pin: avatar */
    .ls-switch-av{width:120px;height:120px;border-radius:50%;
      background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 100%);
      border:2px solid rgba(255,255,255,.28);
      display:flex;align-items:center;justify-content:center;font-size:50px;
      box-shadow:0 4px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);}

    /* Responsive: ab 900px 2-spaltig */
    @media(min-width:900px){
      .ls-clock{margin-bottom:18px;}
      .ls-clock-time{font-size:76px;}
      .lock-pin-wrap{flex-direction:row;align-items:center;justify-content:center;gap:90px;}
      .lu-av{width:136px;height:136px;font-size:56px;}
      .lu-nm{font-size:18px;max-width:170px;}
      .lock-user-list{gap:44px 60px;max-width:1200px;}
      .pin-pad{grid-template-columns:repeat(3,106px);gap:14px;}
      .pin-key{width:106px;height:106px;font-size:40px;}
      .pin-key.ghost{font-size:30px;}
      .lock-logo-placeholder,.ls-switch-av{width:144px;height:144px;font-size:62px;}
      .lock-logo{width:144px;height:144px;}
      .ls-pin-name{font-size:28px;}
      .pin-dot{width:20px;height:20px;}
      .pin-display{gap:22px;height:22px;}
    }
    @media(min-width:1400px){
      .ls-clock{margin-bottom:14px;}
      .ls-clock-time{font-size:88px;}
      .lock-pin-wrap{gap:120px;}
      .lu-av{width:160px;height:160px;font-size:68px;}
      .lu-nm{font-size:20px;max-width:200px;}
      .lock-user-list{gap:50px 70px;}
      .pin-pad{grid-template-columns:repeat(3,120px);gap:16px;}
      .pin-key{width:120px;height:120px;font-size:44px;}
      .pin-key.ghost{font-size:34px;}
      .lock-logo-placeholder,.ls-switch-av{width:168px;height:168px;font-size:74px;}
      .lock-logo{width:168px;height:168px;}
      .ls-pin-name{font-size:32px;}
      .pin-dot{width:22px;height:22px;}
      .pin-display{gap:25px;height:25px;}
      .lock-switch-btn{font-size:16px;margin-top:22px;}
    }

    /* Admin-Panel */
    #adminPanel{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;
      align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(3px);}
    .admin-panel-box{background:#252840;border:1px solid rgba(255,255,255,.1);border-radius:14px;
      padding:22px;width:300px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
    .admin-panel-box h2{font-size:17px;font-weight:700;margin-bottom:16px;text-align:center;}
    .admin-panel-links{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
    .admin-link-btn{padding:10px 12px;border-radius:7px;border:1px solid var(--border);
      background:rgba(255,255,255,.05);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-align:left;}
    .admin-link-btn:hover{border-color:#90caf9;background:rgba(33,150,243,.15);}
    .admin-open-btn{width:100%;padding:11px;background:#1565c0;color:#fff;border:none;
      border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:7px;}
    .admin-open-btn:hover{background:#0d47a1;}
    .admin-close-btn{width:100%;padding:9px;background:rgba(255,255,255,.07);color:var(--text2);
      border:1px solid var(--border);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;}

    /* Member-Modal */
    .member-search-result{border:1px solid var(--border);border-radius:7px;padding:9px 11px;
      cursor:pointer;transition:all .15s;margin-bottom:4px;background:rgba(255,255,255,.03);}
    .member-search-result:hover{border-color:#90caf9;background:rgba(33,150,243,.12);}
    .member-search-result.selected{border-color:#90caf9;background:rgba(33,150,243,.18);}
    .member-name{font-size:13px;font-weight:600;}
    .member-meta{font-size:11px;color:var(--text2);}
    .member-balance-info{background:rgba(33,150,243,.1);border-radius:7px;padding:11px;margin-bottom:11px;}
    .balance-row{display:flex;justify-content:space-between;margin-bottom:3px;}
    .balance-label{font-size:12px;color:#90caf9;}
    .balance-val{font-size:13px;font-weight:700;color:#90caf9;}
    .balance-val.negative{color:#ef9a9a;}

    /* Special-Modal */
    .special-item{border:1px solid var(--border);border-radius:7px;padding:10px;cursor:pointer;
      transition:all .15s;margin-bottom:6px;background:rgba(255,255,255,.03);}
    .special-item:hover{border-color:var(--amber);background:rgba(255,152,0,.1);}
    .special-item.selected{border-color:var(--amber);background:rgba(255,152,0,.15);}
    .special-item-name{font-size:13px;font-weight:600;}
    .special-item-desc{font-size:11px;color:var(--text2);margin-top:2px;}
    .special-item-badge{display:inline-block;padding:2px 7px;border-radius:9px;font-size:10px;
      font-weight:700;background:rgba(255,152,0,.2);color:#ffcc80;margin-top:3px;}

    /* Payment-Modal */
    .payment-summary{background:rgba(0,0,0,.25);border-radius:7px;padding:11px;margin-bottom:12px;}
    .payment-row{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;color:var(--text);}
    .payment-row.total{font-weight:700;font-size:14px;border-top:1px solid var(--border);
      margin-top:4px;padding-top:6px;}
    .member-pay-info{background:rgba(33,150,243,.1);border-radius:7px;padding:10px;margin-bottom:10px;}
    .member-pay-row{display:flex;justify-content:space-between;margin-bottom:3px;font-size:12px;}
    .member-pay-warn{color:#ef9a9a;font-size:11px;font-weight:600;margin-top:4px;}
    .split-section{background:rgba(255,255,255,.04);border-radius:7px;padding:11px;margin-bottom:10px;}
    .split-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
    .split-label{font-size:12px;font-weight:600;color:var(--text2);min-width:50px;}
    .split-input{flex:1;padding:7px 9px;background:#1e2136;border:1.5px solid var(--border);
      border-radius:6px;font-size:13px;color:var(--text);}
    .split-input:focus{outline:none;border-color:#90caf9;}
    .split-hint{font-size:11px;color:var(--text2);text-align:right;}
    .split-hint.ok{color:#81c784;font-weight:700;}
    .split-hint.err{color:#ef9a9a;font-weight:700;}

    /* Tisch-settle */
    .settle-table-item{border:1px solid var(--border);border-radius:7px;padding:10px 12px;
      margin-bottom:6px;background:rgba(255,255,255,.03);cursor:pointer;transition:all .15s;}
    .settle-table-item:hover{border-color:#4caf50;background:rgba(76,175,80,.1);}
    .settle-table-name{font-size:13px;font-weight:700;}
    .settle-table-meta{font-size:11px;color:var(--text2);margin-top:2px;}
    .settle-table-total{font-size:15px;font-weight:800;color:#69f069;margin-top:3px;}
    .settle-table-item.no-orders{opacity:.5;cursor:default;}
    .settle-table-item.no-orders:hover{border-color:var(--border);background:rgba(255,255,255,.03);}

    /* Shift */
    .shift-summary-row{display:flex;justify-content:space-between;margin-bottom:3px;
      font-size:12px;color:var(--text);}
    .shift-summary-row.highlight{font-weight:700;color:#69f069;border-top:1px solid var(--border);
      margin-top:4px;padding-top:4px;}

    /* Toasts */
    #toastContainer{position:fixed;top:12px;right:12px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
    .toast{background:#252840;border-radius:7px;padding:10px 13px;font-size:12px;font-weight:600;
      box-shadow:0 4px 18px rgba(0,0,0,.5);border-left:3px solid #607d8b;
      max-width:260px;opacity:0;transform:translateX(16px);transition:all .3s;color:var(--text);}
    .toast.show{opacity:1;transform:translateX(0);}
    .toast.success{border-left-color:#4caf50;}
    .toast.error{border-left-color:var(--accent);}
    .toast.warning{border-left-color:var(--amber);}

    /* Variabler-Preis-Numpad im Modal */
    .modal-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0;}
    .modal-np-btn{height:46px;background:var(--panel);border:1px solid var(--border);border-radius:7px;
      color:var(--text);font-size:18px;font-weight:700;cursor:pointer;}
    .modal-np-btn:hover{background:rgba(255,255,255,.1);}
    .modal-np-btn:active{background:rgba(255,255,255,.2);}
    .modal-np-btn.clr{color:#ef9a9a;font-size:12px;}
    .modal-np-btn.del{color:#ffb74d;}
    .modal-numpad-display{background:rgba(0,0,0,.3);border-radius:7px;padding:10px 14px;
      text-align:right;font-size:26px;font-weight:800;color:#fff;font-family:monospace;
      margin-bottom:6px;border:1.5px solid rgba(255,255,255,.12);min-height:52px;}
    .modal-pin-display{background:rgba(0,0,0,.3);border-radius:7px;padding:14px;
      text-align:center;font-size:22px;letter-spacing:10px;color:#fff;
      margin-bottom:6px;border:1.5px solid rgba(255,255,255,.12);min-height:52px;
      display:flex;align-items:center;justify-content:center;}

    /* Entnahme-Grund-Buttons */
    .wr-reason-btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
    .wr-btn{padding:8px 16px;border:1px solid var(--border);border-radius:20px;
      background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;
      font-size:13px;font-weight:600;font-family:inherit;
      transition:background .12s,border-color .12s,color .12s;white-space:nowrap;}
    .wr-btn:hover{background:rgba(255,255,255,.14);}
    .wr-btn.active{border-color:var(--amber);background:rgba(255,152,0,.22);color:var(--amber);}
    .wr-no-reasons{font-size:12px;color:var(--text2);font-style:italic;}

    @media(max-width:1100px){.sidebar{width:120px;}.cart-panel{width:320px;}}
    @media(max-width:820px){.sidebar{width:100px;}.cart-panel{width:280px;}.history-panel{width:155px;}.product-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
    @media(max-width:640px){.history-panel{display:none;}.sidebar{width:85px;}.cart-panel{width:240px;}.product-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}}
    @media(max-width:480px){.sidebar{width:72px;}.sidebar .cat-btn{font-size:10px;padding:7px 3px;}.cart-panel{width:200px;}.product-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;}}

    /* ── THEME PANEL ─────────────────────────────────── */
    #themePanel{
      position:fixed;top:0;right:0;width:260px;height:100vh;
      background:var(--panel);border-left:1px solid var(--border);
      box-shadow:-4px 0 24px rgba(0,0,0,.50);
      display:flex;flex-direction:column;gap:0;
      transform:translateX(100%);transition:transform .22s ease;
      z-index:9000;overflow-y:auto;
    }
    #themePanel.open{transform:translateX(0);}
    .tp-header{
      padding:14px 16px 10px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
    }
    .tp-header h3{font-size:13px;font-weight:700;color:var(--text);}
    .tp-close{
      background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;
      width:28px;height:28px;display:flex;align-items:center;justify-content:center;
      border-radius:4px;
    }
    .tp-close:hover{background:rgba(255,255,255,.10);color:var(--text);}
    .tp-section{padding:12px 16px;}
    .tp-section-label{font-size:10px;font-weight:700;color:var(--text2);
      text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
    .tp-themes{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .tp-theme-chip{
      border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;
      transition:border-color .15s,transform .10s;
    }
    .tp-theme-chip:hover{transform:scale(1.03);}
    .tp-theme-chip.active{border-color:var(--accent);}
    .tp-theme-preview{height:44px;border-radius:8px 8px 0 0;position:relative;}
    .tp-theme-label{
      font-size:10px;font-weight:600;text-align:center;padding:4px 4px 5px;
      background:rgba(0,0,0,.25);color:var(--text);border-radius:0 0 8px 8px;
    }
    .tp-divider{border:none;border-top:1px solid var(--border);margin:0 16px;}
    .tp-font-btns{display:flex;gap:6px;}
    .tp-font-btn{
      flex:1;padding:7px 4px;border:1px solid var(--border);border-radius:7px;
      background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;
      font-weight:600;transition:background .12s,border-color .12s;
    }
    .tp-font-btn:hover{background:rgba(255,255,255,.14);}
    .tp-font-btn.active{border-color:var(--accent);background:rgba(255,255,255,.14);}

    /* ── WhatsApp Reaktions-Toast ── */
    #waReactionToast {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-200%);
      z-index: 9999; display: flex; align-items: center; gap: 10px;
      background: #1a1a1a; border: 1px solid #2a2a2a;
      border-left: 4px solid #25D366;
      border-radius: 12px; padding: 10px 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,.5);
      font-size: 14px; color: #fff; white-space: nowrap; max-width: 90vw;
      opacity: 0;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
      pointer-events: none;
    }
    #waReactionToast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    #waReactionToast .wa-icon { font-size: 20px; flex-shrink: 0; }
    #waReactionToast .wa-emoji { font-size: 26px; flex-shrink: 0; }
    #waReactionToast .wa-text { font-size: 13px; color: #d1d5db; line-height: 1.3; }
    #waReactionToast .wa-text strong { color: #fff; }
    #waReactionToast .wa-chat { font-size: 11px; color: #25D366; margin-top: 1px; }

    /* ── WhatsApp Eingehender Anruf Toast ── */
    #waCallToast {
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(.85);
      z-index: 10000;
      background: #1a1a1a; border: 2px solid #25D366;
      border-radius: 20px; padding: 28px 32px 22px;
      box-shadow: 0 8px 48px rgba(0,0,0,.75);
      text-align: center; min-width: 280px;
      opacity: 0; pointer-events: none;
      transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    }
    #waCallToast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
    #waCallToast .wct-icon { font-size: 48px; margin-bottom: 8px; }
    #waCallToast .wct-label { font-size: 12px; color: #25D366; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
    #waCallToast .wct-name { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
    #waCallToast .wct-type { font-size: 13px; color: #9ca3af; margin-bottom: 20px; }
    #waCallToast .wct-btns { display: flex; gap: 12px; justify-content: center; }
    #waCallToast .wct-btn { border: none; border-radius: 50px; padding: 12px 28px; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .15s; }
    #waCallToast .wct-btn:hover { filter: brightness(1.15); }
    #waCallToast .wct-accept { background: #25D366; color: #fff; }
    #waCallToast .wct-decline { background: #e53935; color: #fff; }
    #waCallToast .wct-hint { font-size: 11px; color: #6b7280; margin-top: 10px; }

    /* ── Intercom Banner (WebRTC) – kompaktes Top-Banner wie iOS-Benachrichtigung ── */
    #intercomOverlay {
      position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
      transform: translateY(-110%);
      transition: transform .4s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }
    #intercomOverlay.show { transform: translateY(0); pointer-events: auto; }
    #intercomBox {
      background: rgba(15,23,42,.97);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(37,211,102,.2);
      box-shadow: 0 6px 28px rgba(0,0,0,.55);
      padding: 10px 14px;
      padding-top: calc(10px + env(safe-area-inset-top, 0px));
      display: flex; align-items: center; gap: 12px;
    }
    .ic-ring-dot {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: rgba(37,211,102,.15);
      display: flex; align-items: center; justify-content: center;
      animation: ic-ring-pulse 1.5s ease-in-out infinite;
      transition: background .3s;
    }
    .ic-ring-dot.in-call { animation: none; background: rgba(37,211,102,.12); }
    @keyframes ic-ring-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
      50%      { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
    }
    #intercomBox .ic-text { flex: 1; min-width: 0; }
    #intercomBox .ic-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #25D366; line-height: 1.2; }
    #intercomBox .ic-caller { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #icDuration { font-size: 13px; font-weight: 600; color: #4ade80; display: none; font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .ic-action-btn {
      width: 76px; height: 38px; border-radius: 19px; border: none;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      gap: 5px; flex-shrink: 0; transition: transform .12s;
      font-size: 12px; font-weight: 600; color: #fff; font-family: inherit;
    }
    .ic-action-btn:active { transform: scale(.93); }
    .ic-action-btn.ic-btn-accept { background: #25D366; box-shadow: 0 2px 10px rgba(37,211,102,.4); }
    .ic-action-btn.ic-btn-decline { background: #e53935; box-shadow: 0 2px 10px rgba(229,57,53,.4); }
    #waCallToast .wct-pulse {
      width: 80px; height: 80px; border-radius: 50%; background: rgba(37,211,102,.15);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px; animation: wct-ring 1.5s ease-in-out infinite;
    }
    @keyframes wct-ring {
      0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
      50%      { box-shadow: 0 0 0 20px rgba(37,211,102,0); }
    }