: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;}

    /* ── PAPIER-KNAPP-BANNER ────────────────────────── */
    .paper-low-banner{display:none;align-items:center;justify-content:center;gap:8px;
      padding:9px 16px;background:#facc15;color:#1a1a1a;font-weight:800;font-size:14px;
      text-align:center;flex-shrink:0;}
    .paper-low-banner.show{display:flex;}

    /* ── HEADER ─────────────────────────────────────── */
    /* Eine einzige Zeile: Logo/Titel (fixe Breite) + Info/Buttons (nimmt den Rest ein) */
    .header{background:var(--panel);border-bottom:2px solid var(--accent);flex-shrink:0;display:flex;align-items:stretch;}
    .header-top{display:flex;align-items:center;gap:10px;padding:7px 12px;flex-shrink:0;}
    .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-shrink:0;}
    .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:0;display:flex;align-items:stretch;gap:0;font-size:12px;flex:1;min-width:0;}
    .header-info{color:var(--text2);flex:1;display:flex;align-items:center;min-width:0;padding:0 14px;}
    .header-info span{margin-right:10px;}
    /* Segmentierte Buttons: Icon oben, Beschriftung darunter, volle Höhe, dünne Trenner (wie eine Toolbar) */
    .hbtn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text);
      padding:4px 14px;border-radius:0;font-size:11px;font-weight:600;cursor:pointer;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
      min-width:68px;height:100%;text-align:center;white-space:nowrap;transition:background .12s;}
    .hbtn-icon{font-size:19px;line-height:1;}
    .hbtn-wide{min-width:150px;}
    .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.12);}
    .hbtn.red{background:var(--accent);border-left-color:var(--accent2);}
    .hbtn.red:hover{background:var(--accent2);}
    .hbtn.amber{background:rgba(255,152,0,0.4);border-left-color:var(--amber);}
    .hbtn.amber:hover{background:var(--amber);}
    .hbtn.green{background:rgba(76,175,80,0.3);border-left-color:#4caf50;}
    .hbtn.green:hover,.hbtn.green.on{background:#4caf50;color:#fff;}
    .hbtn-tour{font-size:14px;}
    /* Gruppentrenner im Kopf-Klappmenü (etwas kräftiger als der .hbtn-Rand) */
    .hbtn-sep{align-self:stretch;width:0;flex-shrink:0;border-left:2px solid var(--border);margin:7px 4px;}
    /* Ausklappbares Untermenü hinter dem Benutzernamen: standardmäßig eingeklappt (max-width:0),
       öffnet sich per Klick auf den Benutzer nach links (Buttons erscheinen links davon). */
    .header-extra-menu{display:flex;align-items:stretch;max-width:0;overflow:hidden;
      transition:max-width .28s ease;flex-shrink:0;}
    .header-extra-menu.open{max-width:900px;}
    /* Dropdown unter dem "System"-Button (Herunterfahren/Neustarten) – bewusst außerhalb
       von .header-extra-menu (dessen overflow:hidden würde ein Aufklappen nach unten
       abschneiden), Position wird per JS (toggleSystemSubmenu) unter den Button gesetzt. */
    .system-power-menu{position:fixed;display:none;flex-direction:column;background:var(--panel);
      border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:100000;
      box-shadow:0 4px 14px rgba(0,0,0,0.35);min-width:150px;}
    .system-power-menu.open{display:flex;}
    .system-power-menu .hbtn{border-left:none;border-bottom:1px solid var(--border);height:auto;padding:10px 14px;}
    .system-power-menu .hbtn:last-child{border-bottom:none;}
    #headerUserBtn{cursor:pointer;}
    /* 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:140px;touch-action:manipulation;position:relative;}
    .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;touch-action:manipulation;}
    .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.sort-selected{border-color:#f59e0b!important;box-shadow:0 0 16px rgba(245,158,11,.5)!important;transform:scale(1.04)!important;}
    .sort-slot-badge{position:absolute;top:4px;left:5px;background:rgba(0,0,0,.65);color:#fff;
      font-size:11px;font-weight:800;border-radius:4px;padding:1px 5px;pointer-events:none;min-width:18px;text-align:center;}
    /* opacity/background !important, da mehrere Themes (macos/tablet/win8/ipad26/
       smc2026 usw.) .product-card.out-of-stock{opacity:...} eigens überschreiben -
       das alte Abdunkeln soll überall durch grauen Hintergrund + rotes X ersetzt werden. */
    .product-card.out-of-stock{opacity:1!important;background:#5a5a5a!important;cursor:not-allowed;}
    .product-card.out-of-stock:hover{transform:none;border-color:transparent;box-shadow:none;}
    .product-card.out-of-stock .product-img,
    .product-card.out-of-stock .product-emoji{filter:grayscale(1);}
    .product-card.out-of-stock::after{
      content:'✕';position:absolute!important;top:50%;left:50%;
      transform:translate(-50%,-50%);font-size:72px;font-weight:900;line-height:1;
      color:#ff1744;pointer-events:none;z-index:6;
      text-shadow:0 0 10px rgba(255,23,68,.95),0 0 22px rgba(255,23,68,.75),0 0 40px rgba(255,23,68,.5),0 2px 6px rgba(0,0,0,.6);}
    .product-card.low-stock-card{background:#ff9800!important;border-color:rgba(255,152,0,.5);}
    .product-card.low-stock-card:hover{border-color:#ffb74d;box-shadow:0 4px 14px rgba(255,152,0,.3);}
    .product-card.low-stock-card .product-name,
    .product-card.low-stock-card .product-price,
    .product-card.low-stock-card .product-unit,
    .product-card.low-stock-card .product-deposit{color:#000!important;}
    /* Stückzahl-Badge auf dem Produktbild (nur bei niedrigem Bestand) – position
       bewusst !important, da manche Themes (z.B. macos.css: ".product-card > *")
       allen direkten Kind-Elementen der Karte position:relative aufzwingen. */
    .product-img-stock{position:absolute!important;top:4px;right:5px;z-index:5;
      background:#ff9800;color:#fff;font-size:17px;font-weight:800;min-width:30px;height:30px;
      padding:0 8px;border-radius:15px;display:flex;align-items:center;justify-content:center;
      box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events: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-unit{font-size:10px;color:var(--text2);font-weight:600;}
    .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.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);}
    .cart-bar.table-bar{background:rgba(46,125,50,.1);border-color:rgba(46,125,50,.3);display:none;min-height:64px;}
    .cart-bar.table-bar.active{background:rgba(46,125,50,.25);border-color:rgba(46,125,50,.55);}
    .cart-bar.table-bar .bar-label{font-size:22px;}
    .cart-undo-btn{margin-left:auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
      color:var(--text);border-radius:7px;font-size:12px;font-weight:700;padding:5px 12px;min-height:28px;
      cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
    .cart-undo-btn:active{background:rgba(255,255,255,.2);transform:scale(.95);}
    /* Wertmarken-Leiste: gleiches "Bar oben im Warenkorb"-Muster wie Tisch/Mitglied,
       eine Zeile pro aktiver Marke (normalerweise nur eine) */
    .token-bar{display:flex;flex-direction:column;}
    .cart-bar.token-item-bar{background:rgba(217,164,6,.12);border-color:rgba(217,164,6,.35);min-height:64px;}
    .cart-bar.token-item-bar .bar-label{font-size:20px;color:#facc15;}
    .cart-bar.token-item-bar .bar-sub{display:block;font-size:12px;font-weight:600;margin-top:3px;}
    .cart-bar.token-item-bar .bar-sub.tb-open{color:#fbbf24;}
    .cart-bar.token-item-bar .bar-sub.tb-done{color:#4ade80;}
    .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;}
    /* Größerer Touch-Ziel-Bereich (Klage: auf 14"-Touchmonitor schwer zu treffen) */
    .bar-clear{color:var(--accent);cursor:pointer;font-weight:700;font-size:19px;
      min-width:38px;min-height:38px;display:flex;align-items:center;justify-content:center;
      border-radius:9px;background:rgba(229,57,53,.14);flex-shrink:0;}
    .bar-clear:active{background:rgba(229,57,53,.32);}

    /* 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;justify-content:center;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;}
    /* 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;}
    /* Ausgeblendet (nur im Sortier-Modus sichtbar, zum Wieder-Einblenden antippen) */
    .bottom-bar.sort-active .bbar-btn.bbar-hidden-pref{opacity:.35;}
    .bottom-bar.sort-active .bbar-btn.bbar-hidden-pref::after{content:'✕';color:#ef5350;
      font-size:16px;font-weight:900;}
    /* 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;}

    /* ── SCHNELLKASSE ──────────────────────────────────── */
    .quick-pay-bar{height:92px;flex-shrink:0;display:flex;align-items:stretch;gap:8px;
      padding:8px 12px;background:var(--panel);border-top:3px solid #16a34a;}
    .quick-pay-bar .qpb-mini{min-width:64px;border:none;border-radius:10px;cursor:pointer;
      background:rgba(255,255,255,.08);color:var(--text2);font-size:15px;font-weight:700;
      touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
    .quick-pay-bar .qpb-mini:active{transform:scale(.94);}
    .quick-pay-bar .qpb-total{flex:1;display:flex;flex-direction:column;justify-content:center;
      align-items:flex-start;color:var(--text);padding-left:6px;}
    .quick-pay-bar .qpb-total span{font-size:12px;color:var(--text2);font-weight:600;}
    .quick-pay-bar .qpb-total strong{font-size:32px;line-height:1;}
    .quick-pay-bar .qpb-btn{min-width:190px;border:none;border-radius:12px;color:#fff;
      font-size:26px;font-weight:800;cursor:pointer;touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;}
    .quick-pay-bar .qpb-btn:active{transform:scale(.96);}
    .quick-pay-bar .qpb-cash{background:#16a34a;}
    .quick-pay-bar .qpb-card{background:#2563eb;}
    body.quickmode .bottom-bar{display:none;}
    body.quickmode .product-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;}
    body.quickmode .product-grid [data-product-id]{min-height:118px;font-size:1.12rem;}

    /* ── 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;}
    /* Zahlungsart-Umschalter im Zahlungsmodal: direkt zwischen Bar/Karte/Mitglied/Tisch
       wechseln, ohne das Modal zu schließen (ersetzt das frühere Zahlungsart-Popup) */
    .pay-method-row{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);}
    .pay-method-btn{flex:1;padding:13px 6px;font-size:14px;font-weight:700;border-radius:9px;
      border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);
      cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s;}
    .pay-method-btn.active{border-color:#4ade80;background:rgba(74,222,128,.16);color:#4ade80;}

    /* ══ Vollbild-Modals (inhaltsreiche Dialoge) ═════════════════════════ */
    /* Deckende Fläche über den ganzen Bildschirm; der Inhalt läuft in einer
       angenehm breiten, zentrierten Spalte über die volle Höhe – konsistent
       mit Mitglieder/Tische/Bezahlung. Klick auf den Rand schließt weiterhin. */
    /* KEIN display-Override – sonst schlägt es .hidden (display:none) und alle
       Modals wären dauerhaft sichtbar. Nur Optik + Ausrichtung anpassen. */
    .modal-overlay.modal-fs{background:var(--bg,#16181f)!important;padding:0!important;
      backdrop-filter:none!important;align-items:flex-start!important;justify-content:center!important;
      overflow-y:auto!important;}
    .modal-overlay.modal-fs.hidden{display:none!important;}
    .modal-fs > .modal{
      width:100%!important;max-width:900px!important;min-height:100%!important;
      height:auto!important;max-height:none!important;margin:0 auto!important;
      border:0!important;border-radius:0!important;box-shadow:none!important;
      padding:28px 30px 110px!important;box-sizing:border-box!important;
      background:var(--bg,#16181f)!important;}
    .modal-fs > .modal > h2:first-child{font-size:22px;margin-bottom:18px;}

    /* ══ Zahlungsmodal – Vollbild, Karten-Layout ══════════════════════════ */
    #paymentModal{background:var(--bg,#16181f);align-items:stretch;justify-content:stretch;padding:0;backdrop-filter:none;}
    #paymentModal > .pay-shell{
      width:100%;max-width:1440px;margin:0 auto;height:100%;max-height:none;
      border:0;border-radius:0;box-shadow:none;overflow:hidden;
      display:flex;flex-direction:column;gap:16px;padding:24px 28px;box-sizing:border-box;
      background:var(--bg,#16181f);}
    .pi{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
    .pi.pi-sm{width:16px;height:16px;}

    /* Kopf */
    .pay-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0;}
    .pay-header-title{display:flex;align-items:center;gap:14px;min-width:0;}
    .pay-header-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
      background:rgba(74,222,128,.14);color:#4ade80;flex-shrink:0;}
    .pay-header-ico .pi{width:28px;height:28px;}
    .pay-header h2{margin:0;font-size:26px;font-weight:800;color:var(--text);line-height:1.1;}
    .pay-header-sub{font-size:13px;color:var(--text2);margin-top:2px;}
    .pay-comment-pill{display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
      background:var(--panel);border:1px solid var(--border);color:var(--text2);font-size:14px;
      font-weight:600;cursor:pointer;touch-action:manipulation;max-width:340px;}
    .pay-comment-pill.has-text{color:var(--text);border-color:rgba(74,222,128,.5);}
    .pay-comment-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .pay-comment-input{width:100%;box-sizing:border-box;padding:12px 16px;border-radius:12px;
      background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:15px;flex-shrink:0;}

    /* Spalten */
    #paymentModal .pay-columns{flex:1;min-height:0;display:flex;gap:22px;justify-content:center;align-items:flex-start;}
    #paymentModal .pay-main{flex:1 1 820px;max-width:840px;min-width:0;min-height:0;
      overflow-y:auto;display:flex;flex-direction:column;gap:14px;align-self:stretch;}
    #paymentModal .pay-sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;min-height:0;}
    #paymentModal .pay-method-row{flex-shrink:0;margin:0;padding-top:14px;}
    @media(max-width:900px){
      #paymentModal .pay-columns{flex-direction:column;overflow-y:auto;align-items:stretch;}
      #paymentModal .pay-main{overflow:visible;max-width:none;align-self:auto;}
      #paymentModal .pay-sidebar{width:auto;}
    }

    /* Karten */
    .pay-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-sizing:border-box;}
    .pay-card-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
      color:var(--text2);text-transform:none;margin-bottom:12px;}
    .pay-card-title .pi{width:18px;height:18px;margin-left:auto;color:var(--text2);}
    .pay-field-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px;}

    /* Bar-Eingabe */
    .pay-cash-row{display:flex;align-items:center;gap:12px;}
    .pay-cash-row .modal-numpad-display{flex:1;background:transparent;border:0;padding:0;min-height:auto;
      text-align:left;font-size:44px;font-weight:800;color:var(--text);font-family:inherit;letter-spacing:-1px;}
    #cashDisplay::after{content:" €";}
    .pay-bksp{width:52px;height:44px;border-radius:10px;background:rgba(255,255,255,.05);
      border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;
      cursor:pointer;flex-shrink:0;touch-action:manipulation;}
    .pay-cash-underline{height:3px;border-radius:2px;background:#22c55e;margin:6px 0 14px;}

    #cashQuickRow{display:flex;gap:8px;flex-wrap:wrap;}
    #cashQuickRow .qc-btn{flex:1;min-width:60px;height:46px;display:flex;align-items:center;justify-content:center;gap:6px;
      background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--text);
      font-size:15px;font-weight:700;cursor:pointer;touch-action:manipulation;}
    #cashQuickRow .qc-btn.qc-wide{flex:1.5;}
    #cashQuickRow .qc-btn:active{background:rgba(255,255,255,.16);}
    #cashQuickRow .qc-btn.active{background:rgba(34,197,94,.18);border-color:#22c55e;color:#4ade80;}

    /* Numpad */
    #paymentModal .modal-numpad{margin:0;gap:8px;}
    #paymentModal .modal-np-btn{height:58px;font-size:22px;background:rgba(255,255,255,.04);}
    #paymentModal .modal-np-btn.clr{height:48px;}

    /* Aktionen-Karte */
    .pay-actions-card{display:flex;flex-direction:column;gap:8px;}
    .pay-action-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
      padding:12px 12px;border-radius:12px;background:transparent;border:1px solid transparent;
      color:var(--text);cursor:pointer;touch-action:manipulation;}
    .pay-action-row:hover{background:rgba(255,255,255,.05);}
    .pay-action-row .pi{color:var(--text2);}
    .pay-action-row.active{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);}
    .pay-action-row.active .pi{color:#f59e0b;}
    .par-title{display:block;font-size:15px;font-weight:700;}
    .par-sub{display:block;font-size:12px;color:var(--text2);margin-top:1px;}
    .pay-dash{border-top:1px dashed var(--border);margin:6px 2px;}
    .pay-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
      padding:14px 14px;border-radius:12px;border:0;cursor:pointer;touch-action:manipulation;color:#fff;}
    .pay-cta .par-sub{color:rgba(255,255,255,.8);}
    .pay-cta .pi{color:#fff;}
    .pay-cta-confirm{background:#16a34a;}
    .pay-cta-confirm:active{background:#15803d;}
    .pay-cta-cancel{background:rgba(220,38,38,.16);color:#f87171;border:1px solid rgba(220,38,38,.4);}
    .pay-cta-cancel .par-sub{color:rgba(248,113,113,.85);}
    .pay-cta-cancel .pi{color:#f87171;}

    /* Rückgeld-Karte */
    .pay-change-card{text-align:center;}
    .pay-change-card .pay-card-title{justify-content:flex-start;}
    #changeDisplay{font-size:44px;font-weight:900;font-family:monospace;letter-spacing:-1px;
      color:#4ade80;padding:6px 0 4px;}
    #changeDisplay.change-negative{color:#f87171;}
    #changeDisplay.change-zero{color:var(--text2);}
    #changeBreakdown{font-size:12.5px;color:var(--text2);opacity:.85;line-height:1.35;}
    .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 (Windows-Style: Benutzerliste links, Login mittig) ── */
    #lockScreen{
      position:fixed;inset:0;z-index:9000;
      display:flex;align-items:center;justify-content:center;overflow:hidden;
      background:rgba(22,25,32,.55);
      backdrop-filter:blur(36px) saturate(1.1);
      -webkit-backdrop-filter:blur(36px) saturate(1.1);
      font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
    }
    @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
      #lockScreen{background:linear-gradient(155deg,#31373f 0%,#3e464f 50%,#282d34 100%);}
    }
    #lockScreen.hidden{display:none!important;}

    /* Uhr (dezent oben rechts) */
    .ls-clock{position:fixed;top:20px;right:28px;text-align:right;user-select:none;z-index:2;}
    .ls-clock-time{font-size:34px;font-weight:300;line-height:1;color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.5);}
    .ls-clock-date{font-size:13px;font-weight:400;color:rgba(255,255,255,.55);margin-top:5px;}

    /* Linke Benutzerliste */
    .ls-sidebar{position:fixed;left:0;top:0;bottom:0;width:300px;z-index:2;
      display:flex;flex-direction:column;
      padding:20px 16px 20px 12px;
      background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.18) 72%,transparent 100%);}
    .ls-user-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding-right:4px;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;}
    .ls-user-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;
      background:transparent;border:none;color:rgba(255,255,255,.92);cursor:pointer;
      font-family:inherit;font-size:15px;font-weight:400;text-align:left;
      transition:background .15s;-webkit-tap-highlight-color:transparent;user-select:none;}
    .ls-user-item:hover{background:rgba(255,255,255,.10);}
    .ls-user-item:active{background:rgba(255,255,255,.18);}
    .ls-user-item.selected{background:rgba(255,255,255,.16);}
    .ls-item-av{width:38px;height:38px;border-radius:50%;flex:none;
      background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
      display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);}
    .ls-item-av svg{width:20px;height:20px;}
    .ls-item-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      text-shadow:0 1px 4px rgba(0,0,0,.5);}
    .ls-empty{color:rgba(255,255,255,.4);font-size:13px;padding:10px 12px;}

    /* Suchfeld unten in der Liste */
    .ls-search{display:flex;align-items:center;gap:9px;margin-top:14px;flex:none;
      background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
      border-radius:6px;padding:9px 12px;color:rgba(255,255,255,.55);}
    .ls-search:focus-within{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);}
    .ls-search svg{flex:none;}
    .ls-search input{flex:1;min-width:0;background:none;border:none;outline:none;
      color:#fff;font-size:14px;font-family:inherit;}
    .ls-search input::placeholder{color:rgba(255,255,255,.45);}

    /* Mitte: Avatar + Name + PIN */
    .ls-center{display:flex;flex-direction:column;align-items:center;z-index:1;}
    .ls-avatar{width:140px;height:140px;border-radius:50%;
      background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.25);
      display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);
      box-shadow:0 8px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);}
    .ls-avatar svg{width:72px;height:72px;}
    .ls-name{font-size:28px;font-weight:400;color:#fff;margin:18px 0 24px;
      text-shadow:0 1px 10px rgba(0,0,0,.4);max-width:520px;text-align:center;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

    /* 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);}
    @keyframes lsDotShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
    .pin-display.dots-shake{animation:lsDotShake .35s ease;}
    .lock-error{font-size:14px;color:rgba(255,130,130,.9);min-height:22px;margin-bottom:14px;text-align:center;}

    /* Rundes 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;
      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);}

    /* Responsive */
    @media(max-width:720px){
      .ls-sidebar{width:210px;padding:14px 10px;}
      .ls-item-av{width:32px;height:32px;}
      .ls-item-av svg{width:17px;height:17px;}
      .ls-user-item{font-size:14px;gap:10px;padding:7px 10px;}
      .ls-center{margin-left:200px;}
      .ls-avatar{width:104px;height:104px;}
      .ls-avatar svg{width:54px;height:54px;}
      .ls-name{font-size:22px;margin:14px 0 18px;}
      .pin-pad{grid-template-columns:repeat(3,76px);gap:11px;}
      .pin-key{width:76px;height:76px;font-size:28px;}
      .ls-clock-time{font-size:26px;}
    }
    @media(min-width:900px){
      .pin-pad{grid-template-columns:repeat(3,100px);gap:14px;}
      .pin-key{width:100px;height:100px;font-size:38px;}
      .pin-key.ghost{font-size:28px;}
    }
    @media(min-width:1400px){
      .ls-sidebar{width:340px;padding:24px 18px 24px 14px;}
      .ls-user-item{font-size:16px;padding:9px 14px;}
      .ls-item-av{width:42px;height:42px;}
      .ls-item-av svg{width:22px;height:22px;}
      .ls-avatar{width:165px;height:165px;}
      .ls-avatar svg{width:86px;height:86px;}
      .ls-name{font-size:32px;}
      .pin-pad{grid-template-columns:repeat(3,112px);gap:16px;}
      .pin-key{width:112px;height:112px;font-size:42px;}
      .pin-key.ghost{font-size:32px;}
      .pin-dot{width:22px;height:22px;}
      .pin-display{gap:25px;height:25px;}
      .ls-clock-time{font-size:38px;}
      .ls-clock-date{font-size:14px;}
    }

    /* Wertmarken: Leiste im Warenkorb (Zeilen-Stil siehe .token-item-bar oben) + Picker */
    .token-hint{font-size:10px;color:rgba(56,189,248,.8);text-align:center;padding:4px 0 2px;}
    .cart-item.token-item{border-left:2px solid #38bdf8;}

    /* Marken-Kachel im Produktraster */
    .product-card.token-card{border:1px solid rgba(56,189,248,.5);
      background:linear-gradient(160deg,rgba(56,189,248,.16) 0%,rgba(56,189,248,.06) 100%);}
    .product-card.token-card .product-name{color:#38bdf8;}
    .product-card.token-card:hover{border-color:#38bdf8;}
    .token-tile-sub{font-size:10px;color:var(--text2);background:none;padding:0;}

    /* 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 – Grid-Karten */
    .member-grid-card{border:1px solid var(--border);border-radius:9px;padding:12px 14px;
      cursor:pointer;transition:all .15s;background:rgba(255,255,255,.03);}
    .member-grid-card:hover{border-color:#90caf9;background:rgba(33,150,243,.12);}
    .member-grid-card.selected{border-color:#90caf9;background:rgba(33,150,243,.18);}
    .member-grid-card.member-has-debt{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07);}
    .member-grid-card.member-has-debt:hover{border-color:#ef9a9a;background:rgba(239,68,68,.15);}
    .member-grid-name{font-size:14px;font-weight:700;margin-bottom:3px;}
    .member-grid-num{font-size:11px;color:var(--text2);margin-bottom:4px;}
    .member-grid-balance{font-size:13px;color:#81c784;font-weight:600;}
    .member-grid-balance.negative{color:#ef9a9a;}
    .member-grid-debt{font-size:11px;color:#ef9a9a;font-weight:600;margin-top:3px;}
    .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 / Name – breites 3-Spalten-Modal */
    .var-product-modal{max-width:min(1100px,96vw)!important;width:96vw!important;overflow:visible!important;}
    .var-product-columns{display:flex;gap:18px;align-items:flex-start;min-height:400px;}
    .var-col{display:flex;flex-direction:column;}
    .var-kb-col{flex:1;min-width:0;}
    .var-np-col{width:210px;flex-shrink:0;}
    .var-info-col{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;}
    .var-name-input{width:100%;padding:11px 13px;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);color:white;font-size:17px;box-sizing:border-box;font-family:inherit;outline:none;}
    .var-name-input:focus{border-color:#90caf9;}
    .var-info-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:16px;}
    /* On-Screen-Tastatur (allgemein) */
    .var-keyboard{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
    .var-kb-row{display:flex;gap:6px;}
    .var-kb-btn{flex:1;min-width:0;height:54px;background:var(--panel);border:1px solid var(--border);
      border-radius:8px;color:var(--text);font-size:17px;font-weight:600;cursor:pointer;
      font-family:inherit;padding:0;transition:background .1s;}
    .var-kb-btn:hover{background:rgba(255,255,255,.12);}
    .var-kb-btn:active{background:rgba(255,255,255,.22);}
    .var-kb-btn.kb-special{background:rgba(255,255,255,.06);font-size:22px;color:var(--text2);}
    .var-kb-btn.kb-space{flex:4;font-size:13px;letter-spacing:1px;}
    .var-kb-btn.kb-shift-on{background:rgba(144,202,249,.2);border-color:#90caf9;color:#90caf9;}
    /* Mitglieder-Suche: zweispaltiges Layout */
    .member-search-layout{display:flex;gap:16px;align-items:flex-start;}
    .member-search-kb-col{flex:1;min-width:0;}
    .member-search-kb-col .var-kb-row{gap:6px;}
    .member-search-kb-col .var-kb-btn{height:66px;font-size:20px;border-radius:9px;}
    .member-search-kb-col .var-kb-btn.kb-special{font-size:26px;}
    .member-search-kb-col .var-kb-btn.kb-space{font-size:14px;}
    .member-search-kb-col .var-keyboard{gap:6px;}
    .member-search-list-col{flex:0 0 280px;min-width:0;}
    /* Variabler-Preis-Numpad im Modal */
    .modal-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;}
    .modal-np-btn{height:52px;background:var(--panel);border:1px solid var(--border);border-radius:8px;
      color:var(--text);font-size:20px;font-weight:700;cursor:pointer;touch-action:manipulation;}
    .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:13px;height:44px;}
    .modal-np-btn.del{color:#ffb74d;}
    /* Größere Variante für Vollbild-Dialoge (Storno) – siehe renderAdminCodeNumpad in pos-numpad.js */
    .modal-numpad-lg{gap:7px;}
    .modal-numpad-lg .modal-np-btn{height:70px;font-size:24px;border-radius:10px;}
    .modal-numpad-lg .modal-np-btn.clr{height:70px;font-size:16px;border-radius:10px;}
    .modal-numpad-lg .modal-np-btn.del{height:70px;font-size:22px;border-radius:10px;}
    .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;}
    /* Layout-Modus */
    .product-grid.layout-mode{grid-template-columns:var(--layout-cols,repeat(4,1fr));}
    .layout-empty-slot{border:2px dashed rgba(255,255,255,.18);border-radius:10px;min-height:88px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:rgba(255,255,255,.18);font-size:11px;}
    .layout-empty-slot:hover,.layout-empty-slot.layout-target{border-color:#90caf9;background:rgba(33,150,243,.1);color:#90caf9;}
    .product-card.layout-selected{outline:2px solid #90caf9;outline-offset:2px;background:rgba(33,150,243,.2);}
    .product-card.layout-target{outline:2px dashed #90caf9;outline-offset:2px;}
    .layout-unplaced-card{opacity:.7;}
    .layout-unplaced-card.layout-selected{opacity:1;}
    /* Tisch-Raster (gleiche Optik wie Mitglieder-Grid) */
    .table-grid-card{border:1px solid var(--border);border-radius:9px;padding:12px 14px;cursor:pointer;transition:all .15s;background:rgba(255,255,255,.03);}
    .table-grid-card:hover{border-color:#90caf9;background:rgba(33,150,243,.12);}
    .table-grid-card.table-busy{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.07);}
    .table-grid-card.table-busy:hover{border-color:#f59e0b;background:rgba(245,158,11,.16);}
    .table-grid-name{font-size:14px;font-weight:700;margin-bottom:3px;}
    .table-grid-meta{font-size:11px;color:var(--text2);margin-bottom:4px;}
    .table-grid-total{font-size:13px;font-weight:600;color:#fbbf24;}
    .table-grid-resv{font-size:11px;color:#60a5fa;margin-top:3px;}
    .table-grid-credit{font-size:12px;font-weight:600;color:#4ade80;margin-top:2px;}
    .table-grid-add{border:2px dashed rgba(255,255,255,.2);border-radius:9px;padding:12px 14px;cursor:pointer;transition:all .15s;background:transparent;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.4);font-weight:600;}
    .table-grid-add:hover{border-color:#90caf9;color:#90caf9;background:rgba(33,150,243,.06);}
    /* ─── Table context menu ─── */
    .table-ctx-menu{position:fixed;z-index:3001;background:var(--panel,#1e2136);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:6px;min-width:220px;box-shadow:0 10px 40px rgba(0,0,0,.55);opacity:0;transform:scale(.92);transform-origin:top center;transition:opacity .14s ease,transform .14s ease;pointer-events:none;}
    .table-ctx-menu.table-ctx-visible{opacity:1;transform:scale(1);pointer-events:auto;}
    .table-ctx-title{font-size:13px;font-weight:600;color:var(--text2,#8891a5);padding:6px 10px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px;}
    .table-ctx-sub{font-size:12px;color:var(--text2,#8891a5);padding:2px 10px 8px;}
    .table-ctx-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px;border:none;background:transparent;color:var(--text,#e2e8f0);font-size:15px;font-weight:500;border-radius:9px;cursor:pointer;text-align:left;transition:background .1s;}
    .table-ctx-btn:hover,.table-ctx-btn:active{background:rgba(255,255,255,.07);}
    .table-ctx-btn.table-ctx-danger{color:#f87171;}
    .table-ctx-btn.table-ctx-danger:hover,.table-ctx-btn.table-ctx-danger:active{background:rgba(248,113,113,.1);}
    .table-ctx-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0;}

    @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); }
    }

    /* ── Geführter Tour ─────────────────────────────────── */
    #tourBg {
      position: fixed; inset: 0; z-index: 10000; pointer-events: all;
    }
    #tourSpotlight {
      position: fixed; z-index: 10001; border-radius: 10px; pointer-events: none;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
      outline: 2px solid rgba(255,255,255,0.25);
      transition: left .3s, top .3s, width .3s, height .3s;
      animation: tour-pulse 2s ease-in-out infinite;
    }
    @keyframes tour-pulse {
      0%,100% { outline-color: rgba(255,255,255,0.20); }
      50%      { outline-color: rgba(255,255,255,0.55); }
    }
    #tourBox {
      position: fixed; z-index: 10002; width: 280px;
      background: #1e2136; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
      animation: tour-fadein .25s ease;
      pointer-events: all;
    }
    @keyframes tour-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

    /* Pfeil-Dreieck am Tooltip */
    #tourBox::before {
      content: ''; position: absolute; border: 9px solid transparent;
    }
    /* Tooltip ist LINKS → Pfeil zeigt nach RECHTS (Pfeil am rechten Rand) */
    #tourBox.tour-arrow-right::before {
      right: -18px; top: 50%; transform: translateY(-50%);
      border-left-color: #1e2136;
    }
    /* Tooltip ist RECHTS → Pfeil zeigt nach LINKS (Pfeil am linken Rand) */
    #tourBox.tour-arrow-left::before {
      left: -18px; top: 50%; transform: translateY(-50%);
      border-right-color: #1e2136;
    }
    /* Tooltip ist UNTEN → Pfeil zeigt nach OBEN (Pfeil am oberen Rand) */
    #tourBox.tour-arrow-top::before {
      top: -18px; left: 50%; transform: translateX(-50%);
      border-bottom-color: #1e2136;
    }
    /* Tooltip ist OBEN → Pfeil zeigt nach UNTEN (Pfeil am unteren Rand) */
    #tourBox.tour-arrow-bottom::before {
      bottom: -18px; left: 50%; transform: translateX(-50%);
      border-top-color: #1e2136;
    }

    .tour-step-count { font-size: 10px; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
    .tour-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; }
    .tour-text  { font-size: 12.5px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }
    .tour-text b { color: var(--text); }
    .tour-btns  { display: flex; gap: 8px; }
    .tour-btn-skip {
      flex: 0 0 auto; padding: 7px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12);
      background: transparent; color: var(--text2); font-size: 11px; cursor: pointer;
    }
    .tour-btn-skip:hover { color: var(--text); }
    .tour-btn-next {
      flex: 1; padding: 8px; border-radius: 7px; border: none;
      background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    }
    .tour-btn-next:hover { background: var(--accent2); }

    /* ? Tour-Button im Header – teilt sich Form/Größe mit .hbtn (Zeile 31), nur Marker-Klasse für Themes */