/* Responsive Overrides */
@media (max-width: 900px) {

    /* Compact Mobile Header Layout: Row Flex, Wrap */
    nav[style*="justify-content: space-between"] {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.8rem 1rem !important;
        gap: 0 !important;
    }

    /* 1. Logo (Top Left) */
    nav>div.logo {
        flex: 1 1 auto !important;
        order: 1;
    }

    /* 3. Actions: Icon Mode (Top Right) */
    nav>div:nth-child(3) {
        flex: 1 1 auto !important;
        order: 2;
        justify-content: flex-end !important;
        width: auto !important;
        margin-top: 0 !important;
        gap: 1rem !important;
    }

    /* Transform 'Kontakt' Text Link to Icon Button */
    nav>div:nth-child(3)>a[href="contact.html"] {
        font-size: 0 !important;
        /* Hide Text */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Inject Envelope Icon */
    nav>div:nth-child(3)>a[href="contact.html"]::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
        opacity: 0.9;
    }

    /* Transform 'Client Portal' Button to Icon Button */
    nav>div:nth-child(3)>.btn-login {
        font-size: 0 !important;
        /* Hide Text */
        padding: 0 !important;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        border: 1px solid rgba(157, 78, 221, 0.5) !important;
        background: rgba(157, 78, 221, 0.1) !important;
    }

    /* Inject User Icon */
    nav>div:nth-child(3)>.btn-login::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    }

    /* 2. Nav Links (Bottom Row) */
    nav>div:nth-child(2) {
        flex: 1 1 100% !important;
        order: 3;
        flex-direction: row !important;
        /* Keep horizontal */
        justify-content: space-between !important;
        padding: 0 0.5rem;
        gap: 0 !important;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Smaller Nav Links */
    nav>div:nth-child(2) a {
        font-size: 0.75rem !important;
        letter-spacing: 0.5px !important;
    }

    /* Header Padding - Adjusted for new height */
    header {
        padding-top: 130px !important;
        align-items: center !important;
    }

    /* Stack Grids */
    .grid-2,
    .grid-3,
    .hud-container,
    .research-container {
        grid-template-columns: 1fr !important;
    }

    /* Adjust Font Sizes */
    h1 {
        font-size: 2.2rem !important;
    }

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

@media (max-width: 600px) {

    /* Compact HUD specific */
    .hud-compact {
        flex-direction: column;
        gap: 1.5rem !important;
    }

    /* Ensure charts don't overflow */
    .heatmap-container,
    svg {
        max-width: 100%;
    }
}