
@media (max-width: 1600px) {
    .filter-toggle-btn {
        display: block; 
    }

    /* Einklappbare Filter (Tablet & Mobile) */
    .filter-wrapper {
        display: none; 
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .filter-wrapper.show {
        display: flex;
        height: auto;
        opacity: 1;
        padding: 10px 5px; 
        border-top: 1px solid #444;
        gap: 5px; 
    }
    
    .filter-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}


@media (max-width: 800px) {
    /* Kompakte Ansicht für Tablets/Kleine Laptops */
    .overlay-content { 
        padding: 1rem; 
        width: 90%; 
        max-height: 85vh;
        overflow-y: auto;
    }
    .detail-img { width: 130px; height: 130px; }
    
    .detail-stats { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 0.5rem;
    }
    
    .stat-row { font-size: 0.8rem; padding: 0.4rem; }
}


@media (max-width: 600px) {
    .header-content { 
        flex-direction: column; 
        gap: 0.5rem;
        width: 100%;
    }
    
    .search-container { 
        width: 100%; 
        flex-direction: row; 
        gap: 0.5rem;
    }
    
    #search-input { 
        flex: 1; 
        width: 0; 
        min-width: 0;
    }
    
    #search-button, .filter-toggle-btn { 
        padding: 0.8rem;
        flex-shrink: 0;
    }

    /* Raster-Anpassungen für Mobilgeräte */
    .pokemon-grid { 
        gap: 1rem;
    }
    
    .pokemon-card { 
        padding: 1rem; 
        min-width: 45%; 
    }
    
    .pokemon-image { width: 100px; height: 100px; }
    .pokemon-name { font-size: 1.1rem; }

    /* Overlay Kompaktansicht */
    .overlay-content { 
        padding: 0.5rem; 
        width: 95%;
        margin: auto;
        max-height: 90vh;
        gap: 0.5vh; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    /* Responsive Bild - Skaliert mit Bildschirmhöhe */
    .detail-img { 
        width: auto; 
        height: auto; 
        max-height: 15vh; 
        max-width: 100px;
        margin-bottom: 0;
        align-self: center;
    }
    
    .nav-arrow { font-size: 1.2rem; padding: 0.1rem; }
    .close-btn { right: 0.5rem; top: 0.5rem; font-size: 1.5rem; }

    /* Beschreibungstext - Begrenzung auf 3 Zeilen */
    .overlay-content p {
        font-size: 0.75rem;
        margin: 0.5vh 0;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .detail-stats {
        margin-top: 0.5vh;
        gap: 2px;
        /* Erbt 2 Spalten von 800px */
    }

    .type-relations-container {
        margin: 0.5vh 0;
    }
    
    .relation-title {
        font-size: 0.65rem;
        margin-bottom: 1px;
    }

    /* Entwicklungen - Ultra Kompakt */
    .evolution-container {
        margin-top: 0.2rem;
        gap: 2px;
        flex-wrap: nowrap; /* Erzwingt eine Zeile */
        overflow-x: auto; /* Horizontal scrollen wenn unbedingt nötig */
        justify-content: center;
        width: 100%;
    }

    .evolution-container::-webkit-scrollbar { display: none; }

    .evo-card img {
        width: 35px; 
        height: 35px;
    }
    
    .evo-card span { /* Pokemon Name in Evolution */
        font-size: 0.6rem;
    }

    .evo-arrow {
        font-size: 0.8rem;
    }

    .stat-row { 
        font-size: 0.65rem; 
        padding: 0.2rem; 
    }
    
    .pokemon-name { font-size: 1.1rem !important; margin-bottom: 0; }
    .type-badge { padding: 0.1rem 0.3rem; font-size: 0.6rem; margin: 0.1rem; }
}

@media (max-width: 400px) {
    /*Container-Begrenzung */
    .main-content { 
        padding: 0 5px !important; 
        margin: 1rem auto;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .header { 
        padding: 0.5rem 5px; 
        width: 100%;
        max-width: 100vw;
    }
    
    /* Raster-Anpassungen */
    .pokemon-grid { 
        flex-direction: column;
        align-items: stretch; 
        gap: 15px;
    }
    
    /* Karten-Verkleinerung */
    .pokemon-card { 
        width: 100%; 
        min-width: 0 !important; 
        padding: 10px;
        min-height: auto; 
        border-radius: 12px;
        box-sizing: border-box; 
        flex: 1 1 100%;
    }
    
    .pokemon-image { 
        width: 80px; 
        height: 80px; 
        margin-bottom: 0.5rem;
    }
    
    .pokemon-name { 
        font-size: 1.2rem !important; 
        margin-bottom: 0.2rem;
        word-break: break-all;
    }
    
    
    .type-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
        margin: 0.1rem;
        white-space: nowrap;
    }
    
    
    .pokemon-card > div { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
    }

    /* Kompakte Suchleiste */
    .search-container { gap: 5px; }
    #search-input { 
        font-size: 0.85rem; 
        padding: 0.5rem; 
        min-width: 0; 
        
    }
    #search-button, .filter-toggle-btn { padding: 0.5rem; }
}

@media (max-width: 320px) {
    .close-btn {
        right: 5px;
        top: 5px;
    }
}


