/**
 * Modern Responsive Styles - Marty's Moden
 * Mobile Optimierung für das moderne Design
 */

/* TABLET (< 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 25px;
    }

    .hero h1 {
        font-size: 2.75rem;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* TABLET & MOBILE (< 768px) */
@media (max-width: 768px) {
    /* Typography */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.35rem !important;
    }

    .hero h1 {
        font-size: 2.25rem !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    /* Navigation - Logo & Name zentriert auf Mobile */
    .navbar {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }

    .logo-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .company-name {
        font-size: 1.25rem;
    }

    /* Navigation - Mobile Menu */
    .nav-menu {
        position: fixed;
        top: 120px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 120px);
        background: white;
        flex-direction: column;
        padding: var(--spacing-xl);
        gap: var(--spacing-md);
        box-shadow: var(--shadow-lg);
        transition: left var(--transition-normal);
        z-index: 999;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 15px 20px;
        font-size: 1.1rem;
        color: var(--primary-brown) !important;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Grids zu Single Column */
    .grid-2,
    .grid-3,
    .grid-4,
    .brand-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }

    .grid-auto {
        grid-template-columns: 1fr !important;
    }

    /* Brand Section - Stack auf Mobile */
    .brand-section > div {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
        text-align: center;
    }

    /* Image Gallery */
    .image-gallery {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    .gallery-item img {
        height: 250px !important;
    }

    /* Section Padding */
    .section {
        padding: var(--spacing-xl) 0 !important;
    }

    /* Hero Padding */
    .hero {
        padding: var(--spacing-xxl) 0 !important;
    }

    /* Buttons */
    .btn {
        width: 100%;
        text-align: center;
    }

    /* Cards */
    .card-image {
        height: 200px;
    }

    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer Description - auf Mobile ausblenden */
    .footer-desc {
        display: none !important;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-legal {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .footer-legal .separator {
        display: none;
    }

    /* TwoPixels größer auf Mobile */
    .twopixels-branding {
        padding: var(--spacing-xl) var(--spacing-md) !important;
    }

    .twopixels-branding a {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
        padding: var(--spacing-lg) !important;
        background: rgba(255,255,255,0.08) !important;
    }

    .twopixels-branding span {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
    }

    .twopixels-branding img {
        height: 60px !important;
    }
}

/* MOBILE (< 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .hero h1 {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .section {
        padding: var(--spacing-lg) 0 !important;
    }

    .container {
        padding: 0 15px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    /* Image Gallery */
    .gallery-item img {
        height: 200px !important;
    }

    /* Brand Cards */
    .brand-card {
        padding: var(--spacing-md) !important;
    }

    /* Section Title */
    .section-title h2 {
        font-size: 1.75rem !important;
    }

    .section-title p {
        font-size: 1rem !important;
    }
}

/* HOVER DISABLED ON TOUCH DEVICES */
@media (hover: none) {
    .card:hover,
    .brand-card:hover,
    .gallery-item:hover {
        transform: none !important;
    }

    .btn:hover {
        transform: none !important;
    }
}