/* ===================================
   Responsive Design - Mobile First
   =================================== */

/* Mobile: Unter 768px */
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
        --title-height: 180px;
        --total-header-height: 240px;
        --content-offset: 0;
    }

    /* Profilbild ausblenden */
    .profile-background {
        display: none;
    }

    /* Content auf volle Breite */
    .content-wrapper {
        margin-left: 0;
        padding: var(--spacing-lg);
    }

    /* Navigation Bar */
    .navigation-bar {
        padding: 0 var(--spacing-md);
        justify-content: space-between;
    }

    /* Burger Button anzeigen */
    .mobile-menu-toggle {
        display: flex;
        order: -1; /* Links positionieren */
    }

    /* Desktop-Menü verstecken, mobile Overlay verwenden */
    .nav-menu {
        display: none; /* Initial versteckt */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(0, 0, 0);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-lg);
        padding: var(--spacing-xl);
        margin: 0;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 999;
        overflow-y: auto;
        list-style: none;
    }

    /* Mobile Menu aktiv */
    .nav-menu.active {
        display: flex !important;
        transform: translateX(0);
        opacity: 1;
    }

    /* Mobile Menu Links */
    .nav-menu li {
        width: 100%;
        max-width: 400px;
        text-align: center;
        display: block;
        list-style: none;
    }

    .nav-link {
        font-size: var(--font-size-lg);
        display: block;
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-xl);
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--border-radius-md);
        transition: all 0.2s ease;
        font-weight: 500;
        text-decoration: none;
        box-sizing: border-box;
    }

    .nav-link::after {
        display: none; /* Desktop Underline ausblenden */
    }

    .nav-link:hover,
    .nav-link:active {
        background: rgba(79, 70, 229, 0.3);
        color: var(--accent-primary);
        transform: scale(1.02);
    }

    /* Language Toggle */
    .lang-toggle {
        position: relative;
        z-index: 1001;
    }

    /* Title Bereich */
    .title-content {
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
    }

    .main-title {
        font-size: var(--font-size-3xl);
    }

    .main-subtitle {
        font-size: var(--font-size-lg);
    }

    /* Sections */
    .content-section {
        padding: var(--spacing-lg) 0;
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    /* Key Facts auf eine Spalte */
    .key-facts {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .intro-text {
        font-size: var(--font-size-base);
    }

    /* Project Grid */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline anpassen */
    .timeline-item {
        padding-left: var(--spacing-md);
    }
}

/* Tablet: 769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-wrapper {
        padding: var(--spacing-lg);
    }

    .nav-menu {
        gap: var(--spacing-md);
    }

    .key-facts {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}