:root {
      --primary: #00A8E8;
      --primary-dark: #003366;
      --bg-color: #f4f7fb;
      --sidebar-bg: #ffffff;
      --card-bg: #ffffff;
      --text-main: #1e293b;
      --text-muted: #64748b;
      --border-color: #cbd5e1; 
      --input-bg: #f8fafc;
      --radius: 12px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
      --transition: all 0.2s ease-in-out;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    
    /* ==========================================
       BASIS & LAYOUT (Desktop & Fixes)
       ========================================== */
    html, body { 
      overflow: hidden !important; 
    }
    
    body { 
      background-color: var(--bg-color); 
      color: var(--text-main); 
      height: 100vh;
      height: 100dvh; 
      touch-action: pan-y;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; 
    }
    
    #app-layout { display: flex; height: 100vh; height: 100dvh; width: 100vw; }
    
    .main-area { 
      flex: 1; 
      min-width: 0;
      display: flex !important; 
      flex-direction: column !important; 
      overflow: hidden !important;
      height: 100vh !important;
      height: 100dvh !important;
    }
    
    .content-wrapper { 
      flex: 1 !important; 
      overflow-y: auto !important; 
      overflow-x: hidden;
      padding: 30px; 
      padding-bottom: 100px !important; 
      scrollbar-width: thin; 
      -webkit-overflow-scrolling: touch;
    }

    .hidden { display: none !important; }
    .spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid white; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; }
    .spinner-blue { border: 3px solid rgba(0, 168, 232, 0.2); border-top: 3px solid var(--primary); width: 40px; height: 40px; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* ==========================================
       UI ELEMENTE (Buttons, Inputs)
       ========================================== */
    .btn { width: 100%; padding: 12px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
    .btn:hover { background: #0090c7; }
    .btn-outline { background: transparent; color: var(--primary-dark); border: 1px solid var(--border-color); }
    .btn-outline:hover { background: #f8fafc; border-color: var(--primary-dark); }
    .btn-outline[onclick="resetFilters()"]:hover { background: #ef4444 !important; color: white !important; }
    .btn-text { background: transparent; color: var(--text-muted); padding: 8px; font-weight: normal; margin-top: 8px; }

    .modern-input, .modern-select { width: 100%; padding: 12px 36px 12px 14px; font-size: 14px; color: var(--text-main); background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; outline: none; transition: var(--transition); box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); -moz-appearance: none; -webkit-appearance: none; appearance: none; }
    .modern-select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; cursor: pointer; }
    .modern-input:hover, .modern-select:hover { border-color: #94a3b8; }
    .modern-input:focus, .modern-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.15); }

    /* ==========================================
       LOGIN SCREEN
       ========================================== */
    #login-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 20px; }
    .login-box { background: var(--card-bg); padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; text-align: center; }
    .input-group { margin-bottom: 16px; text-align: left; }
    
    .modern-checkbox-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
    .modern-checkbox-group label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--text-main); transition: color 0.2s; }
    .modern-checkbox-group label:hover { color: var(--primary-dark); }
    .modern-checkbox-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }

    /* ==========================================
       SIDEBAR & NAVIGATION
       ========================================== */
    .sidebar { width: 320px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; z-index: 110; transition: width 0.3s ease, transform 0.3s ease; will-change: transform, width; backface-visibility: hidden; }
    .sidebar.desktop-collapsed { width: 0 !important; overflow: hidden; border-right: none; }
    .sidebar-header { padding: 24px 20px; border-bottom: 1px solid var(--border-color); text-align: center; }
    .sidebar-header img { max-width: 160px; }
    .sidebar-content { flex: 1; overflow-y: auto; scrollbar-width: thin; padding-bottom: 20px; }
    
    .main-nav { padding: 20px 0; border-bottom: 1px solid var(--border-color); }
    .nav-link { padding: 12px 24px; display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-weight: 600; cursor: pointer; transition: var(--transition); border-left: 3px solid transparent; }
    .nav-link:hover { color: var(--primary-dark); background: #f8fafc; }
    .nav-link.active { color: var(--primary-dark); background: #f0f9ff; border-left-color: var(--primary); }

    .filter-section { padding: 20px 24px; }
    .filter-title { font-size: 13px; text-transform: uppercase; color: var(--primary-dark); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 16px; border-bottom: 2px solid #f1f5f9; padding-bottom: 8px;}
    .filter-group { margin-bottom: 18px; }
    .filter-specs-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .specs-row-1 { display: flex; gap: 10px; flex-wrap: wrap;}
    .specs-row-1 select { flex: 1; min-width: 125px; }
    .specs-row-2 { display: flex; gap: 10px; align-items: center; }
    .specs-row-2 select, .specs-row-2 input { flex: 1; }

    /* ==========================================
       TOPBAR & HEADER
       ========================================== */
    .topbar { background: var(--card-bg); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); min-height: 70px; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; width: 44px; height: 44px; font-size: 24px; cursor: pointer; color: var(--primary-dark); transition: var(--transition); margin-right: 20px; }
    .menu-toggle:hover { background: #f1f5f9; }
    .user-info { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: flex-end; }
    
    .greeting-container { display: flex; align-items: center; gap: 15px; margin-bottom: 4px; max-width: 100%; }
    .greeting { font-weight: 600; color: var(--primary-dark); font-size: 1.2rem; }
    
    .news-ticker-wrapper { display: flex; align-items: center; flex: 1; min-width: 150px; max-width: 450px; background: linear-gradient(90deg, #fff7ed, #ffedd5); border: 1px solid #fdba74; border-radius: 20px; padding: 4px 15px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); text-decoration: none; white-space: nowrap; position: relative; }
    .news-ticker-wrapper:hover .news-ticker-content { animation-play-state: paused; }
    .news-ticker-content { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; color: #c2410c; font-size: 13px; font-weight: 800; }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

    .monkey-btn { font-size: 26px; border: none; background: transparent; cursor: pointer; padding: 5px; transition: transform 0.2s; }
    .monkey-btn:hover { transform: scale(1.1); }
    
    .cart-btn { position: relative; background: #f97316; border: 1px solid #ea580c; padding: 10px 24px; border-radius: 8px; font-weight: bold; color: white; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3); }
    .cart-btn:hover { background: #ea580c; transform: translateY(-1px); }
    .cart-badge { position: absolute; top: -10px; right: -10px; background: var(--primary-dark); color: white; font-size: 12px; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; border: 2px solid white; }

    /* ==========================================
       PRODUKT-GRID & KARTEN
       ========================================== */
    .tab-nav { display: flex; gap: 10px; margin-bottom: 24px; justify-content: center; flex-wrap: wrap; }
    .tab-btn { padding: 12px 24px; border-radius: 8px; border: 1px solid var(--border-color); background: white; color: var(--text-muted); cursor: pointer; font-weight: bold; font-size: 15px; transition: var(--transition); }
    .tab-btn:hover { background: #f8fafc; border-color: var(--primary-dark); color: var(--primary-dark);}
    .tab-btn.active { background: var(--primary-dark); color: white; border-color: var(--primary-dark); }

    .quick-filters { display: flex; gap: 10px; overflow-x: auto; padding-top: 5px; padding-bottom: 10px; margin-bottom: 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .quick-filters::-webkit-scrollbar { display: none; }
    .quick-chip { background: white; border: 1px solid var(--border-color); padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 800; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm); }
    .quick-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
    .quick-chip.active { background: var(--primary-dark); color: white; border-color: var(--primary-dark); box-shadow: 0 4px 6px rgba(0, 51, 102, 0.2); }

    .topseller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-bottom: 30px; }
    .topseller-card { background: var(--card-bg); border-radius: var(--radius); border: 2px solid #f97316; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); display: flex; flex-direction: column; cursor: pointer; position: relative; }
    .topseller-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .ts-img { width: 100%; aspect-ratio: 1 / 1; background: #ffffff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f5f9; padding: 10px; }
    .ts-img img { width: 100%; height: 100%; object-fit: contain; }
    .ts-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
    .ts-badge-label { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; color: white; background: var(--primary); z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-transform: uppercase; }

    .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
    .product-grid-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
    .product-grid-small .card-title { font-size: 15px; margin-bottom: 4px; }
    .product-grid-small .card-price { font-size: 16px; margin-top: 2px; margin-bottom: 15px; }
    
    .product-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column; cursor: pointer; position: relative; content-visibility: auto; contain-intrinsic-size: auto 420px; }
    .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #cbd5e1; }
    .product-card.last-clicked { border: 2px solid var(--primary); box-shadow: 0 0 15px rgba(0, 168, 232, 0.3); }
    .product-card.is-grouped { height: 100%; display: flex; flex-direction: column; }
    .product-card.is-grouped .card-img-placeholder { aspect-ratio: 4 / 3; }
    .product-card.is-grouped .card-title { margin-bottom: 5px; }
    
    .card-img-placeholder { width: 100%; aspect-ratio: 4 / 3; max-height: 220px; background: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #f1f5f9; padding: 15px; overflow: hidden; }
    .product-grid-small .card-img-placeholder { max-height: 150px; aspect-ratio: 16 / 9; }
    .card-img-placeholder img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }

    .stock-tag { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; display: inline-block; }
    .tag-in { background: rgba(220, 252, 231, 0.95); color: #166534; border: 1px solid #bbf7d0;}
    .tag-out { background: rgba(254, 240, 138, 0.95); color: #9a3412; border: 1px solid #fde047;}
    
    .card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
    .card-cat { font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; }
    .card-title { font-size: 18px; color: var(--primary-dark); margin-bottom: 8px; font-weight: 800; line-height: 1.3; }
    .card-serie { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
    .card-price { font-size: 22px; font-weight: 800; color: var(--primary); margin-top: 4px; margin-bottom: 20px; }
    .card-actions { display: flex; gap: 12px; }

    .fav-btn { position: absolute; bottom: 12px; right: 12px; width: 34px; height: 34px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: all 0.2s; border: 1px solid #e2e8f0; font-size: 18px; }
    .fav-btn:hover { transform: scale(1.1); background: #f8fafc; }
    .fav-btn.active { color: #ef4444; border-color: #fecdd3; }
    .fav-btn.inactive { color: #cbd5e1; }

    .config-row { margin: 10px 0; padding-top: 10px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 6px; }
    .config-title { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
    .config-select { width: 100%; padding: 8px 12px; font-size: 14px; border: 2px solid #ea580c; border-radius: 6px; background: #ffffff; color: var(--primary-dark); cursor: pointer; font-weight: bold; }
    .config-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15); }

    /* ==========================================
       MODALS, POPUPS, DRAWER
       ========================================== */
    #modal-overlay { z-index: 99998 !important; }
    #product-modal, #custom-popup, #cart-drawer { z-index: 99999 !important; }

    .overlay, .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99998 !important; }
    .overlay.active, .popup-overlay.active { opacity: 1; visibility: visible; }

    .modal-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.95); background: var(--card-bg); width: 95%; max-width: 900px !important; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,0.4); }
    .modal-center.active { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
    
    .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 640px; height: 100vh; height: 100dvh; background: var(--card-bg); box-shadow: -12px 0 40px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
    .drawer-right.active { transform: translateX(0); }
    
    #cart-drawer .modal-header { padding: 18px 24px; }
    #cart-drawer .modal-body { padding: 18px 20px; }
    #cart-drawer .drawer-footer { padding: 18px 24px; }
    
    .modal-header { padding: 24px 30px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(10px); }
    .modal-header h2 { font-size: 22px; color: var(--primary-dark); margin: 0; }
    .close-btn { background: #f1f5f9; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
    .close-btn:hover { color: white; background: #ef4444; transform: rotate(90deg); }
    .modal-body { padding: 30px; overflow-y: auto; scrollbar-width: thin; flex: 1; }
    .drawer-footer { padding: 20px 24px; border-top: 1px solid var(--border-color); background: white; }

    /* ==========================================
       LISTEN, TABELLEN & DETAILS
       ========================================== */
    details.filter-accordion { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
    details.filter-accordion summary { font-size: 14px; font-weight: 800; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 20px; cursor: pointer; background: #f8fafc; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
    details.filter-accordion summary::-webkit-details-marker { display: none; }
    details.filter-accordion summary:after { content: "▼"; font-size: 12px; transition: transform 0.3s ease; color: var(--primary); }
    details.filter-accordion[open] summary { border-bottom: 1px solid var(--border-color); background: #f1f5f9; }
    details.filter-accordion[open] summary:after { transform: rotate(-180deg); }
    details.filter-accordion .accordion-content { padding: 20px; background: #ffffff; }

    .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 10px; }
    .detail-box { background: #ffffff; padding: 16px; border-radius: 8px; border-left: 3px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
    .detail-box span { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .detail-box strong { color: var(--primary-dark); font-size: 15px; white-space: pre-wrap; display: block; }

    .variant-table-wrapper { margin-top: 24px; background: white; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; }
    .variant-table-header { background: #f1f5f9; padding: 12px 20px; font-weight: bold; color: var(--primary-dark); font-size: 15px; border-bottom: 1px solid var(--border-color); }
    .variant-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #f1f5f9; transition: background 0.2s; }
    .variant-item:last-child { border-bottom: none; }
    .variant-item:hover { background: #f8fafc; }
    .variant-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .variant-qty { font-weight: bold; color: #166534; background: #dcfce7; padding: 4px 10px; border-radius: 20px; font-size: 12px; display: inline-block; width: fit-content; margin-bottom: 4px; border: 1px solid #bbf7d0;}
    .variant-specs { font-size: 14px; color: var(--text-main); }
    .variant-options { font-size: 12px; color: var(--text-muted); }

    .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-color); }
    .sauna-cart-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box !important; }
    .sauna-cart-item > * { width: 100% !important; box-sizing: border-box !important; }
    .qty-controls { display: flex; align-items: center; gap: 10px; background: var(--bg-color); padding: 4px; border-radius: 6px; border: 1px solid var(--border-color); }
    .qty-btn { background: white; border: 1px solid var(--border-color); width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-weight: bold; }
    .cart-summary { background: var(--bg-color); padding: 20px; border-radius: 8px; margin-top: 20px; border: 1px solid var(--border-color); }

    .order-card { background: white; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: var(--transition); content-visibility: auto; contain-intrinsic-size: auto 110px; }
    .order-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
    .order-date { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
    .order-total { font-size: 18px; font-weight: bold; color: var(--primary-dark); }
    
    #view-dealers { max-width: 1100px !important; margin: 0 auto !important; }
    .admin-dealer-card { background: white; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 15px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 90px; }
    .admin-dealer-summary { padding: 15px 20px; background: #f8fafc; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; color: var(--primary-dark); }
    .admin-dealer-summary:hover { background: #f1f5f9; }
    .admin-dealer-details { padding: 20px; border-top: 1px solid var(--border-color); font-size: 14px; }

    @supports not (content-visibility: auto) {
      .product-card, .order-card, .admin-dealer-card {
        contain: layout style paint;
      }
    }

    /* ==========================================
       WEITERE FIXES (Google Maps, Privacy, Titles)
       ========================================== */
    .pac-container { z-index: 99999 !important; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-family: inherit; }
    
    body.privacy-mode .admin-dealer-card, body.privacy-mode .order-card { filter: blur(6px); opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease; }
    body.privacy-mode .admin-dealer-card:hover, body.privacy-mode .order-card:hover { filter: blur(0); opacity: 1; }
    
    #view-title { margin-left: 24px !important; margin-top: 20px !important; margin-bottom: 35px !important; }

    @media (min-width: 769px) {
      .admin-dealer-details > div:last-child { justify-content: flex-end !important; }
      .admin-dealer-details > div:last-child .btn { flex: 0 0 200px !important; }
    }

    /* ==========================================
       MOBILE DESIGN (Der große Layout-Fix!)
       ========================================== */
    @media (max-width: 768px) {
      /* Zwingt den Browser, Mobile-Scrollen korrekt auszuführen */
      html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
      #app-layout { display: block !important; height: auto !important; overflow: visible !important; width: 100% !important; }
      .main-area { display: block !important; height: auto !important; overflow: visible !important; width: 100% !important; }

      /* Sidebar Mobile-Styling */
      .sidebar { position: fixed; transform: translateX(-100%); width: 85%; max-width: 320px; box-shadow: var(--shadow-lg); z-index: 99999 !important; height: 100vh; height: 100dvh; }
      .sidebar.mobile-open { transform: translateX(0) translateZ(0); }

      /* Verhindert automatischen iOS-Safari Zoom beim Antippen von Eingabefeldern (< 16px) */
      .modern-input, .modern-select, .config-select {
        font-size: 16px !important;
      }

      /* Die Hauptleiste oben: Links das Menü, rechts die Icons */
      .topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        min-height: 60px !important;
        height: auto !important;
        background: var(--card-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
      }
      
      /* Hamburger Menü fixieren (Kein schwebender Geist mehr!) */
      .menu-toggle {
        position: static !important; 
        margin: 0 !important;
        flex: 0 0 40px !important;
        height: 40px !important;
        width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        z-index: 10 !important;
        border: 1px solid #f1f5f9 !important;
        color: var(--primary-dark) !important;
      }
      
      /* Rechte Seite der Leiste */
      .user-info {
        display: flex !important;
        justify-content: flex-end !important;
        flex: 1 !important;
        margin: 0 0 0 10px !important;
        width: calc(100% - 50px) !important;
      }
      
      /* Begrüßungstext links verstecken */
      .user-info > div:first-child { display: none !important; }
      
      /* Werkzeug-Leiste (rechts) - Horizontal wischbar, wenn Platz fehlt! */
      .user-info > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -ms-overflow-style: none;  /* IE/Edge Scrollbar verstecken */
        scrollbar-width: none;  /* Firefox Scrollbar verstecken */
      }
      
      .user-info > div:last-child::-webkit-scrollbar { display: none !important; }

      /* Desktop-Power-Tools auf Mobile verstecken (absichtlich!) */
      #header-add-dealer-btn, 
      #header-report-btn {
        display: none !important; 
      }

      /* SCHRUMPF-VERBOT: Icons bleiben fest 40x40 Pixel */
      .monkey-btn, #privacy-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        margin: 0 !important;
      }

      /* Live-Radar kompakt aber schick */
      #live-radar-container {
        height: 40px !important;
        padding: 0 12px !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 20px !important;
      }
      #live-count { font-size: 13px !important; }

      /* Logout-Button */
      .user-info button[onclick="logout()"] {
        height: 40px !important;
        padding: 0 15px !important;
        font-size: 13px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: #fff1f2 !important; 
        color: #e11d48 !important; 
        border: 1px solid #fecdd3 !important; 
        border-radius: 8px !important;
      }
      
      /* Rabatt-Feld im Monkey-Mode */
      #monkey-discount {
        width: 65px !important;
        min-width: 65px !important;
        height: 40px !important;
        padding: 0 8px !important;
        font-size: 16px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
      }

      /* Warenkorb-Button bleibt schwebend unten rechts (mit Safe-Area für iPhone Home-Indicator) */
      .cart-btn { 
        position: fixed !important; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px; width: auto !important; 
        padding: 14px 22px !important; border-radius: 30px !important; 
        box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4) !important; z-index: 1000 !important; 
        font-size: 15px; margin: 0 !important; 
      }

      /* Mobile Optimierungen für Karten und Popups */
      .content-wrapper { padding: 0 10px 90px 10px !important; overflow: visible !important; height: auto !important; }
      .content-wrapper h2, .content-wrapper h3, .content-wrapper h4 { white-space: normal !important; word-wrap: break-word !important; }
      .specs-row-1, .specs-row-2 { flex-direction: column; width: 100%; gap: 8px; }
      .tab-nav { justify-content: center; }
      .tab-btn { width: 100%; text-align: center; flex: 1 1 100%; padding: 10px; font-size: 14px; }
      .modal-center { width: 95%; max-width: 100%; margin: 0 auto; }
      .modal-body { padding: 15px; overflow-x: hidden; }
      .detail-grid { grid-template-columns: 1fr; }
      .variant-item { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
      .drawer-right { max-width: 100% !important; width: 100% !important; height: 100vh; height: 100dvh; }
      #cart-drawer .modal-header { padding: 14px 16px !important; }
      #cart-drawer .modal-body { padding: 12px 10px !important; }
      #cart-drawer .drawer-footer { padding: 14px 16px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
      .sauna-cart-item { padding: 12px !important; }
      .sauna-logistik-grid { grid-template-columns: 1fr !important; }
      .order-card { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
      .greeting-container { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
      .news-ticker-wrapper { max-width: 100%; }
      #order-search-input, #admin-dealer-search, #admin-status-filter, #admin-login-filter, #parts-search, #parts-category-filter {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
      }
      #dealer-account-view > div, #seller-account-view > div, #view-colors > div > div {
        padding: 18px !important;
      }
    }
    /* --- NEU: Mobile Anpassungen (X-Button & Berichte) --- */
.mobile-close-btn {
  display: none;
}

@media (max-width: 768px) {
  .mobile-close-btn {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    font-size: 36px;
    color: var(--primary-dark);
    cursor: pointer;
    line-height: 1;
    padding: 0;
  }
  
  /* Versteckt den Bericht-Button oben im Header auf Mobile, da er jetzt im Menü ist */
  #header-report-btn {
    display: none !important;
  }
}