/* =============================================
   MOBILE.CSS - Responsive Anpassungen
   ============================================= */

/* =============================================
   TABLET & KLEINERE DESKTOPS (< 1200px)
   ============================================= */
@media (max-width: 1199px) {
    .main-header nav {
        padding: 0 30px;
    }
    
    .container {
        max-width: 960px;
    }
    
    .hero-headline {
        font-size: 5rem;
    }
    
    .prop-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
}

/* =============================================
   TABLET (< 992px)
   ============================================= */
@media (max-width: 991px) {
    /* Header Navigation */
    .main-header nav {
        padding: 0 20px;
        flex-wrap: wrap;
    }
    
    .main-header .logo {
        font-size: 1.5rem;
    }
    
    .main-header .main-nav {
        display: none; /* Navigation verstecken auf Tablet/Mobile */
    }
    
    /* Suchfeld kompakter */
    .header-search-form {
        margin-left: auto;
        margin-right: 10px;
    }
    
    .search-input {
        width: 150px;
    }
    
    .user-nav {
        gap: 10px;
    }
    
    .user-nav .nav-button {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    /* Hero Bereich */
    .hero {
        height: 60vh;
    }
    
    .hero-headline {
        font-size: 4rem;
    }
    
    .hero-lead {
        font-size: 1rem;
    }
    
    /* Kaskadierende Menü-Anpassung */
    .cascading-menu-wrapper {
        top: 75px;
        left: 15px;
    }
    
    .category-menu-main {
        width: 250px;
    }
    
    .category-menu-sub {
        width: 250px;
    }
    
    /* Content Wrapper */
    .homepage-content-wrapper {
        padding: 0 15px;
    }
    
    /* Service Boxen */
    .service-box, .mission-box {
        padding: 20px;
    }
    
    /* Artikel Grid */
    .prop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Artikel Detailseite */
    .detail-hero {
        height: 40vh;
    }
    
    .detail-content {
        margin-top: -100px;
    }
    
    .detail-main h1 {
        font-size: 2.5rem;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .main-footer {
        font-size: 0.85rem;
    }
}

/* =============================================
   MOBILE (< 768px)
   ============================================= */
@media (max-width: 767px) {
    /* Body */
    body {
        padding-top: 60px;
    }
    
    :root {
        --header-height: 60px;
    }
    
    /* Header kompakter */
    .main-header {
        height: 60px;
    }
    
    .main-header nav {
        padding: 0 15px;
    }
    
    .main-header .logo {
        font-size: 1.3rem;
    }
    
    /* Suchfeld noch kompakter oder verstecken */
    .header-search-form {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-background);
        border-bottom: 1px solid var(--color-secondary);
        padding: 10px 15px;
        display: none; /* Standardmäßig versteckt */
    }
    
    .header-search-form.active {
        display: block;
    }
    
    .search-input {
        width: 100%;
        border-radius: 4px;
    }
    
    /* Such-Button im Header als Toggle */
    .mobile-search-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
    }
    
    .mobile-search-toggle svg {
        stroke: var(--color-text);
        width: 20px;
        height: 20px;
    }
    
    /* User Navigation kompakter */
    .user-nav {
        gap: 8px;
    }
    
    .user-nav .nav-button {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    
    /* Einige Buttons verstecken auf sehr kleinen Screens */
    .user-nav .nav-button-secondary {
        display: none;
    }
    
    /* Hero */
    .hero {
        height: 50vh;
        margin-top: -60px;
    }
    
    .hero-headline {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-lead {
        font-size: 0.9rem;
    }
    
    .hero-phone-button {
        padding: 10px 20px;
        margin-top: 1rem;
    }
    
    .hero-phone-button .phone-number {
        font-size: 1.2rem;
    }
    
    .hero-phone-button .phone-cta {
        font-size: 0.7rem;
    }
    
    /* Kaskadierende Menü */
    .cascading-menu-wrapper {
        top: 70px;
        left: 10px;
    }
    
    .category-menu-trigger {
        padding: 8px 15px;
        font-size: 1rem;
    }
    
    .category-menu-main {
        width: calc(100vw - 20px);
        max-width: 300px;
    }
    
    /* Untermenü unter statt neben Hauptmenü auf Mobile */
    .category-menu-sub {
        position: static;
        width: 100%;
        margin: 0;
        border: none;
        border-top: 1px solid var(--color-secondary);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
    }
    
    /* Pfeil auf Mobile größer und als Button */
    .submenu-arrow {
        transform: rotate(90deg);
        padding: 8px;
        margin: -8px;
        cursor: pointer;
        font-size: 1.2em;
        color: var(--color-primary);
        transition: transform 0.3s ease;
    }
    
    /* Pfeil dreht sich wenn Untermenü offen */
    .has-submenu.submenu-active .submenu-arrow {
        transform: rotate(270deg);
    }
    
    /* Hauptlink und Pfeil besser trennen */
    .category-menu-main > li.has-submenu > a {
        padding-right: 50px;
        position: relative;
    }
    
    .category-menu-main > li.has-submenu .submenu-arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        margin: 0;
        padding: 10px;
        z-index: 2;
    }
    
    .category-menu-main > li.has-submenu.submenu-active .submenu-arrow {
        transform: translateY(-50%) rotate(270deg);
    }
    
    /* Content Sections */
    .homepage-content-wrapper .container {
        padding: 0 15px;
    }
    
    section {
        padding: 30px 0 !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Service Boxen */
    .service-box, .mission-box {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    .service-box h3, .mission-box h3 {
        font-size: 1.3rem;
    }
    
    /* Grid zu Single Column */
    .prop-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .row .col-md-4,
    .row .col-lg-4,
    .row .col-md-6 {
        margin-bottom: 20px;
    }
    
    /* Artikel Detailseite */
    .detail-hero {
        height: 35vh;
    }
    
    .detail-content {
        margin-top: -80px;
    }
    
    .detail-main h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .breadcrumb-nav {
        font-size: 0.8rem;
    }
    
    .lead-description {
        font-size: 1rem;
    }
    
    .specs-grid {
        padding: 15px;
        gap: 0.75rem;
        font-size: 0.9rem;
    }
    
    .availability-box {
        padding: 12px;
        margin-bottom: 1.5rem;
    }
    
    .price-list {
        padding: 15px;
    }
    
    .price-list h3 {
        font-size: 1.3rem;
    }
    
    /* Thumbnail Gallery */
    .thumbnail-container {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .img-thumbnail {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
    
    /* Related Props Carousel */
    .related-props-section {
        padding: 40px 0;
    }
    
    .related-props-section .carousel-shelf-title {
        font-size: 1.5rem;
    }
    
    .related-props-section .prop-card {
        width: 220px;
    }
    
    /* About Us Section */
    .about-us-section .row {
        flex-direction: column-reverse;
    }
    
    .about-us-section video {
        margin-bottom: 20px;
    }
    
    /* Overview Header */
    .overview-header {
        padding: 30px 0;
    }
    
    .overview-header h1 {
        font-size: 2rem;
    }
    
    .category-description {
        font-size: 0.9rem;
    }
    
    /* Pagination */
    .pagination {
        font-size: 0.85rem;
    }
    
    .pagination .page-link {
        padding: 6px 10px;
    }
    
    /* Footer */
    .main-footer {
        padding: 30px 0 15px 0;
        font-size: 0.8rem;
    }
    
    .main-footer h5 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .main-footer .row .col-md-4 {
        margin-bottom: 20px;
    }
    
    .main-footer .copyright {
        font-size: 0.75rem;
    }
    
    /* Cookie Banner */
    #cookie-consent-banner {
        padding: 15px !important;
        font-size: 0.85rem !important;
    }
    
    #cookie-consent-banner p {
        margin-bottom: 8px !important;
    }
    
    #accept-cookies {
        padding: 8px 20px !important;
        font-size: 0.75rem !important;
    }
}

/* =============================================
   SEHR KLEINE MOBILE (< 480px)
   ============================================= */
@media (max-width: 479px) {
    .main-header .logo {
        font-size: 1.1rem;
    }
    
    .hero-headline {
        font-size: 2.5rem;
    }
    
    .hero-lead {
        font-size: 0.85rem;
    }
    
    .user-nav .nav-button {
        padding: 5px 8px;
        font-size: 0.65rem;
    }
    
    .service-box h3, .mission-box h3 {
        font-size: 1.2rem;
    }
    
    .detail-main h1 {
        font-size: 1.75rem;
    }
    
    .btn-add-to-cart,
    .btn-software-demo,
    .btn-back-to-overview {
        font-size: 0.85rem;
        padding: 10px;
    }
    
    .overview-header h1 {
        font-size: 1.75rem;
    }
    
    .related-props-section .prop-card {
        width: 180px;
    }
}

/* =============================================
   LANDSCAPE MOBILE (Querformat)
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        height: 80vh;
    }
    
    .detail-hero {
        height: 60vh;
    }
}

/* =============================================
   TOUCHSCREEN OPTIMIERUNGEN
   ============================================= */
@media (hover: none) and (pointer: coarse) {
    /* Größere Touch-Targets */
    .category-menu-trigger,
    .nav-button,
    .btn-add-to-cart,
    .btn-software-demo,
    .btn-back-to-overview {
        min-height: 44px;
    }
    
    /* Keine Hover-Effekte auf Touch-Geräten */
    .prop-card:hover,
    .prop-card-static:hover {
        transform: none;
    }
    
    /* Submenüs nur per Klick öffnen */
    .category-menu-main > li.has-submenu:hover > .category-menu-sub {
        display: none;
    }
}

/* =============================================
   UTILITY CLASSES FÜR MOBILE
   ============================================= */
.hide-mobile {
    display: none !important;
}

.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
    
    .hide-mobile {
        display: block !important;
    }
    
    .show-mobile {
        display: none !important;
    }
}