/* Mobile Responsive Styles */

@media (max-width: 768px) {
    /* Header */
    .header-content {
        padding: 8px 15px !important;
        flex-wrap: wrap;
    }
    
    .logo {
        font-size: 20px !important;
        letter-spacing: 1px !important;
        line-height: 0.8 !important;
    }
    
    nav {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 8px;
        flex-wrap: wrap;
        gap: 3px !important;
    }
    
    nav a {
        margin: 2px 3px !important;
        font-size: 9px !important;
        padding: 4px 6px !important;
    }
    
    nav a[style*="color: #ff0000"] {
        font-size: 16px !important;
        padding: 2px 6px !important;
    }
    
    nav form {
        display: none !important;
    }
    
    /* Hero */
    .hero h1 {
        font-size: 48px !important;
        letter-spacing: 5px !important;
    }
    
    .hero p {
        font-size: 14px !important;
        letter-spacing: 2px !important;
    }
    
    .btn-primary {
        padding: 15px 35px !important;
        font-size: 12px !important;
    }
    
    /* Container */
    .container {
        padding: 120px 15px 80px 15px !important;
    }
    
    .container[style*="padding-top: 150px"] {
        padding-top: 140px !important;
    }
    
    /* Section Title */
    .section-title {
        font-size: 36px !important;
        letter-spacing: 4px !important;
        margin-bottom: 30px !important;
    }
    
    /* Products Grid */
    .products {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .product-image {
        height: 300px !important;
    }
    
    .product-info {
        padding: 20px !important;
    }
    
    .product h3 {
        font-size: 16px !important;
    }
    
    .product .price {
        font-size: 24px !important;
    }
    
    /* Product Detail Page */
    .container > div[style*="grid-template-columns: 1fr 1fr"] {
        display: block !important;
    }
    
    .container > div[style*="grid-template-columns: 1fr 1fr"] > div {
        margin-bottom: 30px;
    }
    
    .container h1[style*="font-size: 48px"] {
        font-size: 32px !important;
        letter-spacing: 2px !important;
    }
    
    .container div[style*="font-size: 32px"] {
        font-size: 24px !important;
    }
    
    /* Size & Color Buttons */
    .size-btn, .color-btn {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    
    /* Quantity Controls */
    button[onclick*="changeQty"] {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
    
    #quantity {
        width: 60px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
    
    /* Cart */
    .cart-item {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 15px !important;
    }
    
    .cart-item img {
        width: 100% !important;
        height: 200px !important;
    }
    
    .cart-item > div:last-child {
        flex-direction: column !important;
        width: 100%;
    }
    
    .cart-item form {
        width: 100%;
        justify-content: center !important;
    }
    
    .cart-total {
        padding: 25px !important;
    }
    
    .cart-total h3 {
        font-size: 28px !important;
    }
    
    /* Forms */
    input, textarea {
        padding: 14px !important;
        font-size: 14px !important;
    }
    
    /* Footer */
    footer > div {
        flex-direction: column !important;
        text-align: center;
    }
    
    footer > div > div:last-child {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Footer Grid Mobile */
    footer > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Footer Social Media Links zentrieren */
    footer a[style*="display: flex"] {
        justify-content: center !important;
    }
    
    /* Order Detail Page - Mobile */
    .container > div[style*="background: #111"] > div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Order Cards */
    .order-card {
        flex-direction: column !important;
        gap: 10px;
        text-align: left;
        overflow: hidden;
    }
    
    .order-card * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .order-card button {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 8px !important;
        font-size: 11px !important;
    }
    
    .order-card select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 11px !important;
        padding: 6px 4px !important;
        border: 2px solid #ddd !important;
    }
    
    .order-card form {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* Order Details Buttons */
    div[style*="margin-top: 30px"] button,
    div[style*="margin-top: 30px"] a button {
        width: 100% !important;
        margin: 5px 0 !important;
        display: block !important;
    }
    
    /* Order Email - Word Break */
    .order-card p,
    .order-card div {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }
    
    /* Checkout Page - Mobile */
    .container > div[style*="grid-template-columns: 1fr 400px"] {
        display: block !important;
    }
    
    .container > div[style*="grid-template-columns: 1fr 400px"] > div {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-bottom: 30px;
    }
    
    /* Bestellübersicht oben auf Mobile */
    .container > div[style*="grid-template-columns: 1fr 400px"] > div:last-child {
        order: -1;
    }
    
    .container > div[style*="grid-template-columns: 1fr 400px"] {
        display: flex !important;
        flex-direction: column;
    }
    
    /* Similar Products Mobile */
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Quick View Modal - Mobile */
    .modal {
        padding: 10px !important;
    }
    
    .modal-wrapper {
        padding: 0 !important;
    }
    
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    
    .modal-header {
        padding: 15px 20px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    .modal-header h2 {
        font-size: 20px !important;
        letter-spacing: 2px !important;
    }
    
    .modal-close {
        width: 35px !important;
        height: 35px !important;
        font-size: 24px !important;
    }
    
    .modal-body {
        padding: 20px !important;
        max-height: calc(90vh - 70px) !important;
    }
    
    /* Größentabelle - Mobile */
    .modal-body {
        padding: 20px !important;
        max-height: calc(90vh - 70px) !important;
    }
    
    .size-guide-table {
        font-size: 11px !important;
        border-radius: 8px !important;
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    
    .size-guide-table thead {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    .size-guide-table tbody {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    .size-guide-table tr {
        display: table-row !important;
    }
    
    .size-guide-table th,
    .size-guide-table td {
        padding: 10px 8px !important;
        font-size: 11px !important;
        text-align: center !important;
        vertical-align: middle !important;
        display: table-cell !important;
    }
    
    .size-guide-table th {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
    }
    
    .size-guide-table tbody td:first-child {
        font-size: 11px !important;
        font-weight: 700 !important;
    }
    
    .size-guide-table th:first-child {
        border-top-left-radius: 8px !important;
    }
    
    .size-guide-table th:last-child {
        border-top-right-radius: 8px !important;
    }
    
    /* Größentabelle Mess-Tipps Box */
    .modal-body > div[style*="background: linear-gradient"] {
        padding: 15px !important;
        margin-top: 20px !important;
    }
    
    .modal-body > div[style*="background: linear-gradient"] h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .modal-body > div[style*="background: linear-gradient"] ul {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    
    .modal-body > div[style*="background: linear-gradient"] li {
        margin-bottom: 6px !important;
    }
    
    /* Größentabelle Überschriften */
    .modal-body h3 {
        font-size: 18px !important;
        margin: 20px 0 10px !important;
    }
    
    .modal-body h3 svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .modal-body > p {
        font-size: 12px !important;
    }
    
    /* Filter Dropdowns Mobile */
    div[style*="display: flex"] select {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    
    /* Filter Buttons */
    div[style*="text-align: center"] a[style*="display: inline-block"] {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }
    
    /* Category Highlights - Mobile */
    .container div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .container div[style*="grid-template-columns: repeat(3, 1fr)"] a {
        height: 200px !important;
    }
    
    .container div[style*="grid-template-columns: repeat(3, 1fr)"] h3 {
        font-size: 32px !important;
    }
}

/* Admin Panel Mobile */
@media (max-width: 768px) {
    body {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100% !important;
        min-height: auto !important;
        padding: 10px !important;
        overflow-x: auto;
    }
    
    .sidebar h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .sidebar nav {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .sidebar a {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    
    .content {
        padding: 10px !important;
        overflow-x: hidden !important;
    }
    
    .content > div[style*="display: grid"],
    .content > div[style*="grid-template-columns"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    .content > div > div[style*="background: white"] {
        margin-bottom: 15px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .content h1 {
        font-size: 18px !important;
        margin-bottom: 15px;
    }
    
    table {
        font-size: 10px;
        width: 100%;
        display: block;
        overflow-x: auto;
    }
    
    table tbody,
    table tr {
        display: block;
        width: 100%;
    }
    
    table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        padding: 10px;
    }
    
    table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 5px !important;
        border: none !important;
    }
    
    table td:before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 100px;
    }
    
    table th {
        display: none;
    }
    
    button {
        padding: 4px 6px !important;
        font-size: 9px !important;
        margin: 1px !important;
    }
    
    input, textarea, select {
        font-size: 14px !important;
    }
    
    .form-container {
        padding: 20px !important;
        max-width: 100% !important;
    }
    
    input, textarea, select {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .stats {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .stat-card {
        padding: 20px !important;
    }
    
    .stat-card h3 {
        font-size: 28px !important;
    }
    
    /* Image Picker Modal */
    #imagePickerModal > div {
        margin: 20px !important;
        padding: 20px !important;
    }
    
    #imagePickerModal h2 {
        font-size: 18px !important;
    }
    
    #imagePickerModal > div > div {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
    }
    
    #imagePickerModal img {
        height: 120px !important;
    }
    
    /* Variant Stock Inputs */
    div[style*="display: inline-block"] input[type="number"] {
        width: 50px !important;
        padding: 4px !important;
        font-size: 12px !important;
    }
    
    /* Color Preview */
    #preview_Schwarz, #preview_Weiß, #preview_Grau, #preview_Rot, #preview_Blau, #preview_Grün, #preview_Gelb, #preview_Orange, #preview_Pink, #preview_Lila, #preview_Braun, #preview_Beige {
        max-width: 100px !important;
    }
    
    /* Buttons in variant section */
    button[onclick*="openImagePicker"] {
        padding: 8px 15px !important;
        font-size: 12px !important;
        margin-bottom: 10px;
    }
    
    label[style*="background: #27ae60"] {
        padding: 8px 15px !important;
        font-size: 12px !important;
    }
}

/* Very Small Screens */
@media (max-width: 480px) {
    .logo {
        font-size: 24px !important;
    }
    
    nav a {
        font-size: 10px !important;
        padding: 4px 6px !important;
        margin: 3px 4px !important;
    }
    
    .hero h1 {
        font-size: 36px !important;
    }
    
    .section-title {
        font-size: 28px !important;
    }
    
    .product-image {
        height: 250px !important;
    }
    
    .size-btn, .color-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}