/* ═══════════════════════════════════════
   MOBILE OPTIMIERUNGEN (≤768px)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    /* 1. HEADER */
    header {
        top: 0 !important; /* no ticker on mobile */
    }

    .header-inner {
        height: 62px !important;
        padding: 0 12px !important;
        gap: 0 !important;
        justify-content: space-between !important;
    }

    .header-brand { gap: 6px !important; }
    .logo-img { height: 46px !important; }
    .shop-badge { display: none !important; } /* hide on mobile, saves space */

    /* Nav hidden on mobile — bottom nav takes over */
    .nav-links { display: none !important; }

    /* Right actions row */
    .header-actions { gap: 5px !important; }

    /* All icon buttons same compact size */
    .hdr-install-btn,
    .admin-nav-btn,
    .hdr-cart-btn {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        min-width: unset !important;
        border-radius: 9px !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
    }

    /* Install: hide text, keep icon */
    .hdr-install-btn { font-size: 0 !important; gap: 0 !important; }
    .hdr-install-btn svg { flex-shrink: 0; }

    /* Admin: hide text, keep icon */
    .admin-btn-text { display: none !important; }
    .admin-nav-btn .admin-icon-pulse { font-size: 1rem !important; margin: 0 !important; }

    /* Login Button (compact) */
    .auth-btn-main {
        padding: 7px 11px !important;
        font-size: 0.75rem !important;
    }
    .login-text-full { display: none; }
    .login-text-short { display: inline; }

    /* Avatar: clean circle, no wrapper border */
    #user-display { align-items: center; }
    .header-user-badge {
        padding: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        gap: 0 !important;
    }
    .header-user-badge img {
        width: 34px !important;
        height: 34px !important;
        border: 2px solid rgba(0, 220, 255, 0.5) !important;
        border-radius: 50% !important;
    }
    #user-display-name { display: none !important; }

    /* 2. TICKER: hidden on mobile */
    .ticker-wrap { display: none !important; }


    /* 3. SUCHE UND FILTER FIX */
    .controls-bar { 
        padding: 15px; 
        position: relative !important; 
        top: 0 !important; 
        margin-bottom: 20px;
        z-index: 1;
    }
    .filter-group { width: 100%; flex-wrap: wrap; justify-content: center; } 
    .input-tools-wrapper { flex-direction: column; gap: 15px; } 
    .search-group { width: 100%; }
    
    .ms-input { font-size: 1.2rem !important; width: 60px !important; }
    #sort-select { width: 100%; text-align: center; }

    /* header stays top:0 on mobile (ticker is hidden) */

    /* 5. ARTIKEL DETAIL ANSICHT FIX (Chat Button unter Bild) */
    .detail-layout { display: flex; flex-direction: column; gap: 20px; }
    .left-col, .right-col { display: contents; }

    /* WICHTIG: REIHENFOLGE DER ELEMENTE AUF DEM HANDY */
    .left-col > div:first-child { order: 1; } /* Titel & Rarity ganz oben */
    .main-image-container { order: 2; margin-bottom: 10px; } /* Bild als zweites */
    
    /* HIER DER FIX: CHAT BUTTON DIREKT NACH DEM BILD (Order 3) */
    .chat-btn { order: 3 !important; margin-bottom: 20px; width: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

    /* Restliche Elemente danach */
    .right-col > .sidebar-box:last-child {
        order: 4; 
        margin-bottom: 20px; 
        border: 1px solid var(--gold-main); 
        background: rgba(10, 10, 10, 0.98);
        position: sticky !important; 
        bottom: 80px !important; 
        z-index: 1000;
        box-shadow: 0 -10px 25px rgba(0,0,0,0.9);
        border-radius: 20px 20px 10px 10px;
    }

    .right-col > .sidebar-box:first-child { order: 5; } /* Verkäufer Info */
    #stats-container { order: 6; } /* Stats */
    .left-col > .sidebar-box { order: 7; } /* Beschreibung */
    .similar-section { order: 8; } /* Ähnliche Produkte */

    .theme-panel { right: 0; width: 100%; top: 60px; }

    /* --- OPTIMIERTE HERO SECTION FÜR MOBILE --- */
    .welcome-box {
        padding: 25px 20px !important;
        max-height: 85vh;
        overflow-y: auto;
        width: 95% !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #111, #050505) !important;
        border: 1px solid var(--gold-main);
    }
    .welcome-box .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2;
        margin-bottom: 15px;
        margin-top: 20px !important;
    }
    .welcome-box .hero-text {
        font-size: 0.95rem !important;
        text-align: center;
        margin-bottom: 20px;
        line-height: 1.5;
        color: #ccc;
    }
    .welcome-features {
        gap: 10px !important;
        margin-bottom: 25px !important;
    }
    .welcome-feature-item {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
        width: 48%; 
        justify-content: center;
    }
    .close-welcome {
        top: 15px;
        right: 15px;
        background: rgba(255,255,255,0.1);
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.2rem;
    }

    /* --- PRODUKTE BESSER SICHTBAR MACHEN (2-Spalten Layout) --- */
    .container { padding: 0 10px !important; }
    .section-header { justify-content: center; margin-bottom: 20px; }
    .section-line { display: none; }

    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important; 
    }

    .grid-card {
        border-radius: 16px !important;
        background: rgba(20,20,20,0.8) !important; 
    }

    .img-wrapper {
        height: 150px !important; /* Deutlich mehr Höhe auf dem Handy */
        padding: 0 !important;
    }
    
    .grid-img {
        object-position: center 20% !important; /* Leichter Fokus auf den oberen Bereich für Avatare */
    }
    .grid-info {
        padding: 10px !important;
    }
    .grid-title {
        font-size: 0.85rem !important;
        margin-top: 5px !important;
    }
    .grid-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .grid-card {
        margin-bottom: 5px;
    }

    .grid-info {
        padding: 12px !important;
    }

    .grid-title {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
        height: 2.8em; 
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
    }

    .grid-sub {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
        margin-bottom: 8px !important;
    }

    .grid-price {
        font-size: 1.2rem !important;
        text-align: left; 
    }

    /* 6. OPTIMIERUNG: INFO & RECHTLICHES (Mobile) */
    .content-box {
        padding: 25px 20px !important;
        margin: 0 !important;
        width: 100% !important;
        border-radius: 15px !important;
    }
    
    .about-grid { 
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .content-box h1 { font-size: 1.8rem !important; line-height: 1.2; text-align: center;}
    .content-box h2 { font-size: 1.4rem !important; }
    .content-box h3 { font-size: 1.2rem !important; }
    .content-box p { font-size: 0.95rem !important; }
}


/* --- TAWK.TO WIDGET POSITION --- */
/* Fallback: Widget-Container über die mobile Bottom-Nav schieben */
@media (max-width: 768px) {
    #tawkchat-minified-box,
    #tawk-bubble-container,
    .tawk-min-container {
        bottom: 82px !important;
    }
}