/* ==========================================================================
   RESPONSIVE DESIGN SYSTEMS — SEPARATE MEDIEN-REGELN
   Gilt AUSSCHLIESSLICH für Laptop, Tablet & Smartphones!
   Der PC/Desktop (>= 1200px) bleibt zu 100 % im visuellen Originalzustand!
   Dashboard (pages/app/*) ist zu 100 % tabu!
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAPTOP OPTIMIERUNG (13–15 Zoll / 1024px bis 1199px)
   Verhindert horizontale Scrollbalken bei 125% / 150% Windows-Skalierung
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    body:not(.dashboard-body) .container,
    body:not(.dashboard-body) .main-container,
    body:not(.dashboard-body) .wrapper,
    body:not(.dashboard-body) .content-wrapper,
    body:not(.dashboard-body) section {
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    body:not(.dashboard-body) .nav-container {
        padding: 14px 4% !important;
    }
}

/* --------------------------------------------------------------------------
   2. TABLET OPTIMIERUNG (769px bis 991px)
   Sauberes Umbrechen von Grids & Anpassung von Abständen & Schriftgrößen
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) and (min-width: 769px) {
    body:not(.dashboard-body) .container,
    body:not(.dashboard-body) section {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body:not(.dashboard-body) h1 {
        font-size: clamp(32px, 5.5vw, 48px) !important;
    }

    body:not(.dashboard-body) h2 {
        font-size: clamp(24px, 4.5vw, 36px) !important;
    }

    /* Grids auf Tablets in 2 Spalten umbrechen */
    body:not(.dashboard-body) .grid-2,
    body:not(.dashboard-body) .grid-3,
    body:not(.dashboard-body) .grid-4,
    body:not(.dashboard-body) .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        gap: 18px !important;
    }

    /* Navigation Anpassung */
    body:not(.dashboard-body) .nav-links a,
    body:not(.dashboard-body) .nav-link {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   3. SMARTPHONE / MOBILE OPTIMIERUNG (bis 768px)
   1-spaltiges Layout, 44x44px Touch-Ziele & Deaktivierung harter CPU-Effekte
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body:not(.dashboard-body) {
        font-size: 14px !important;
        overflow-x: hidden !important;
    }

    body:not(.dashboard-body) .container,
    body:not(.dashboard-body) section {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }

    /* Grids & Cards komplett 1-spaltig */
    body:not(.dashboard-body) .grid-2,
    body:not(.dashboard-body) .grid-3,
    body:not(.dashboard-body) .grid-4,
    body:not(.dashboard-body) .cards-grid,
    body:not(.dashboard-body) .responsive-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Touch Targets: Mindestens 44x44 Pixel Klickfläche */
    body:not(.dashboard-body) button:not(.btn-icon-cmd),
    body:not(.dashboard-body) .btn,
    body:not(.dashboard-body) a.btn,
    body:not(.dashboard-body) input[type="submit"],
    body:not(.dashboard-body) .nav-links a,
    body:not(.dashboard-body) .nav-link,
    body:not(.dashboard-body) .nav-brand {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Performance auf Mobilgeräten: backdrop-filter & schwere Schatten abschalten */
    body:not(.dashboard-body) nav,
    body:not(.dashboard-body) .glass,
    body:not(.dashboard-body) .glass-card,
    body:not(.dashboard-body) .ambient-orb,
    body:not(.dashboard-body) .mesh-bg,
    body:not(.dashboard-body) .cyber-grid,
    body:not(.dashboard-body) .timeline-content-card,
    body:not(.dashboard-body) .filter-tab {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
        animation: none !important;
    }

    /* Flüssiges 60fps-Scrolling auf Handys erzwingen */
    body:not(.dashboard-body) {
        -webkit-overflow-scrolling: touch !important;
    }
    body:not(.dashboard-body) .ambient-orbs-container,
    body:not(.dashboard-body) .cyber-grid {
        display: none !important; /* Schwere Hintergrund-Animationen auf Mobilgeräten ausblenden */
    }

    /* Hero Headline & Slideshow Fix für Handys */
    body:not(.dashboard-body) .cbot-hero h1 .slideshow {
        min-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 1.2em !important;
    }
    body:not(.dashboard-body) .cbot-hero h1 .slideshow .slide {
        white-space: normal !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        display: inline-block !important;
    }
    body:not(.dashboard-body) .cbot-hero h1 .slideshow .slide:not(.active) {
        display: none !important;
    }
    body:not(.dashboard-body) .cbot-hero h1 {
        font-size: clamp(26px, 7vw, 42px) !important;
        line-height: 1.25 !important;
    }
    body:not(.dashboard-body) .cbot-hero p {
        font-size: 15px !important;
        padding: 0 10px !important;
    }
    body:not(.dashboard-body) .cbot-hero-stats {
        flex-direction: column !important;
        gap: 16px !important;
    }
    body:not(.dashboard-body) .cbot-stat {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        padding: 10px 0 !important;
    }
    body:not(.dashboard-body) .cbot-stat:last-child {
        border-bottom: none !important;
    }
    body:not(.dashboard-body) .cbot-hero-btns {
        flex-direction: column !important;
        width: 100% !important;
    }
    body:not(.dashboard-body) .cbot-btn-primary,
    body:not(.dashboard-body) .cbot-btn-ghost {
        width: 100% !important;
        justify-content: center !important;
    }
}