/* ========================================
   MOBILE OPTIMIERUNGEN
   ======================================== */

/* ========================================
   HEADER & NAVIGATION - MOBILE
   ======================================== */
@media (max-width: 768px) {
    /* Header kompakter */
    .header-top {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .logo-img {
        height: 36px;
    }
    
    /* Navigation horizontal scrollbar */
    nav {
        width: 100%;
        margin-top: 0.75rem;
    }
    
    nav ul {
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    nav ul::-webkit-scrollbar {
        display: none;
    }
    
    nav a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* ========================================
   HERO - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .hero {
        padding: 2rem 1rem;
        min-height: auto;
    }
    
    .hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .hero p {
        font-size: 1rem;
        padding: 0 0.5rem;
    }
    
    .hero-stats {
        flex-direction: row;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .hero-stat-number {
        font-size: 2rem;
    }
    
    .hero-stat-label {
        font-size: 0.8rem;
    }
}

/* ========================================
   FILTER BAR - MOBILE
   ======================================== */

/* Filter-Bar immer sticky auf Mobile */
@media (max-width: 1024px) {
    .filter-bar {
        position: sticky;
        top: 0;
        padding: 0.75rem;
        gap: 0.75rem;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .filter-row {
        gap: 0.75rem;
    }
    
    .filter-section-inline {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .filter-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    /* Filter Bar horizontal scrollbar - IMMER STICKY */
    .filter-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: row;
        flex-wrap: nowrap;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        background: var(--card-bg);
    }
    
    .filter-bar::-webkit-scrollbar {
        height: 4px;
    }
    
    .filter-bar::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 2px;
    }
    
    .filter-row {
        flex-wrap: nowrap;
        min-width: max-content;
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .filter-row:not(:last-child) {
        border-bottom: none;
        padding-bottom: 0;
        margin-right: 1rem;
        padding-right: 1rem;
        border-right: 1px solid var(--border);
    }
    
    .filter-section-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .radio-pill span,
    .checkbox-pill span {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
    }
    
    /* Range Slides kompakter */
    .filter-section-inline input[type="range"] {
        width: 80px;
    }
    
    .dual-range-container {
        width: 140px;
    }
}

/* ========================================
   VERGLEICHSTABELLE - MOBILE
   ======================================== */
@media (max-width: 1024px) {
    .compare-wrapper {
        padding: 1rem;
    }
    
    .compare-header-main {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .compare-scroll-container {
        border-radius: var(--radius);
    }
    
    .compare-label {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    .compare-cell {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
        font-size: 0.8rem;
        padding: 0.5rem 0.25rem;
    }
}

/* ========================================
   PRODUKTGRID - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .product-card {
        border-radius: var(--radius);
    }
    
    .product-image {
        height: 160px;
    }
    
    .product-content {
        padding: 1rem;
    }
    
    .product-name {
        font-size: 1rem;
    }
    
    .product-price {
        font-size: 1.25rem;
    }
    
    .product-specs {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .spec-item {
        font-size: 0.8rem;
    }
    
    .tech-badges {
        gap: 0.35rem;
    }
    
    .tech-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* ========================================
   QUICK SECTION - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .quick-section {
        padding: 1rem 0.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   BESTENLISTE - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .bestenliste-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    
    .bestenliste-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    .bestenliste-grid {
        grid-template-columns: 1fr;
    }
    
    .rank-badge {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
}

/* ========================================
   DETAIL PAGE - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .detail-header {
        padding: 1rem;
    }
    
    .detail-title {
        font-size: 1.5rem;
    }
    
    .detail-image {
        height: 200px;
    }
    
    .detail-sections {
        padding: 1rem;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .spec-item {
        padding: 0.75rem;
    }
}

/* ========================================
   MODAL - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 1rem;
        max-height: 85vh;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
}

/* ========================================
   FOOTER - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .footer-section li {
        margin: 0;
    }
}

/* ========================================
   KNOWLEDGE PAGES - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .knowledge-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .knowledge-card {
        padding: 1rem;
    }
    
    .faq-item {
        padding: 1rem;
    }
    
    table {
        font-size: 0.8rem;
    }
    
    th, td {
        padding: 0.5rem;
    }
}

/* ========================================
   TOUCH OPTIMIERUNGEN
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Größere Touch-Ziele */
    .btn,
    .tab-btn,
    .radio-pill span,
    .checkbox-pill span,
    nav a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Keine Hover-Effekte auf Touch-Geräten */
    .product-card:hover {
        transform: none;
    }
    
    /* Active States für Touch */
    .btn:active,
    .tab-btn:active,
    nav a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ========================================
   ORIENTATION: LANDSCAPE
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 1.5rem;
    }
    
    .hero-stats {
        flex-direction: row;
    }
    
    .filter-bar {
        position: relative;
    }
}

/* ========================================
   SAFE AREA (iPhone X+)
   ======================================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .header-top,
        .hero,
        .container,
        .footer-content {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* ========================================
   TESTSIEGER - MOBILE
   ======================================== */
@media (max-width: 768px) {
    /* Testsieger Container - verhindert Überlauf */
    #testsieger-container .detail-section > div {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    #testsieger-container img,
    #testsieger-container .product-image-wrapper {
        max-width: 200px !important;
        height: auto !important;
        margin: 0 auto;
    }
    
    #testsieger-container h2 {
        font-size: 1.5rem !important;
    }
    
    #testsieger-container > div > div:last-child {
        text-align: center;
    }
    
    #testsieger-container > div > div:last-child > div[style*="display: flex"] {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: center;
    }
}

/* Noch kleinere Geräte */
@media (max-width: 480px) {
    #testsieger-container .detail-section {
        padding: 1rem !important;
    }
    
    #testsieger-container h2 {
        font-size: 1.25rem !important;
    }
    
    #testsieger-container > div > div:last-child > div:first-child {
        font-size: 2rem !important;
    }
}

/* ========================================
   BESTENLISTE TABS - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .bestenliste-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .bestenliste-tabs .tab-btn {
        flex: 1 1 auto;
        min-width: 140px;
        max-width: calc(50% - 0.25rem);
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
        white-space: normal;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .bestenliste-tabs .tab-btn {
        min-width: 120px;
        max-width: 100%;
        font-size: 0.85rem;
    }
}

/* ========================================
   BREADCRUMBS
   ======================================== */
/* Alle Bildschirmgrößen - immer einzeilig */
main.container nav,
.container nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

main.container nav::-webkit-scrollbar,
.container nav::-webkit-scrollbar {
    display: none;
}

main.container nav a,
main.container nav span,
.container nav a,
.container nav span,
main.container nav i,
.container nav i {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

main.container nav span,
.container nav span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}