/* ==========================================================================
   Moritz Pahrmann VFX Artist Portfolio - Modern CSS
   ========================================================================== */

:root {
    /* ===== BRAND ===== */
    --brand-white: white;
    --brand-black: black;
    --brand-primary: #4ade80;                           /* Hauptakzentfarbe - Grün für Buttons und wichtige Elemente */
    --brand-primary-dark: #16a34a;                      /* Dunkle Akzentfarbe - Für Hover-Effekte bei grünen Elementen */
    --brand-primary-hover: #22c55e;                     /* Akzentfarbe beim Hover - Mittleres Grün für Hover-Zustände */
    --brand-success: #10b981;                           /* Erfolgsfarbe - Teal Grün für Erfolgsmeldungen */
    --brand-success-light: #34d399;                     /* Helle Erfolgsfarbe - Für Erfolgsanimationen */
    --brand-warning: #ffeb3b;                           /* Warnfarbe - Gelb für Warnmeldungen */
    --brand-error: #ef4444;                             /* Fehler-Hintergrund - Für Fehlermeldungen Hintergrund */
    --brand-error-lightest: #f87171;                    /* Sehr helle Fehlerfarbe - Für subtile Fehler */
    --brand-error-dark: #dc2626;                        /* Dunkle Fehlerfarbe - Für stärkere Fehlerbetonung */

    /* ===== SURFACE / BACKGROUND ===== */
    --surface-0: #050505;                               /* Haupthintergrund - Schwarz für Hauptbereiche */
    --surface-1: #1a1a1a;                               /* Sekundärer Hintergrund - Dunkelgrau für Abschnitte */
    --surface-2: #2c2c2c;                               /* Dritter Hintergrund - Mittelgrau für Karten und Container */
    --surface-modal: rgba(26, 26, 26, 0.95);            /* Modal Hintergrund - Semi-transparenter dunkler Hintergrund */
    --surface-transparent: transparent;                   /* Transparenz - Für transparente Bereiche */
    
    /* ===== TEXT ===== */
    --text-primary: #ffffff;                            /* Primärer Text - Für Hauptinhalte */
    --text-secondary: #cccccc;                          /* Sekundärer Text - Für unterstützende Informationen */
    --text-tertiary: #888888;                           /* Tertiärer Text - Für weniger wichtige Informationen */
    --text-muted: #666666;                              /* Gedämpfter Text - Für weniger wichtige Informationen */

    /* ===== BORDER ===== */
    --border-strong: #333333;                           /* Dunkle Ränder - Für subtile Abgrenzungen */
    --border-medium: #444444;                           /* Extra mittlere Ränder - Für zusätzliche UI-Abgrenzungen */
    --border-light: #555555;                            /* Helle Ränder - Für sichtbarere Abgrenzungen */
           
    /* ===== SHADOW / DEPTH ===== */
    --green-alpha-20: rgba(74, 222, 128, 0.2);       /* Weicher Glow Schatten - Für subtile Leuchteffekte */

    /* ===== OVERLAYS ===== */
    --overlay-medium: rgba(0, 0, 0, 0.5);               /* Mittleres Overlay - Für moderate Abdunkelung */
    --overlay-dark: rgba(0, 0, 0, 0.95);                /* Dunkles Overlay - Weniger durchlässig gemacht */

    /* ===== SEMANTIC ALPHAS ===== */
    /* White Alpha Values */
    --white-alpha-01: rgba(255, 255, 255, 0.01);        /* Weiß 1% Transparenz */
    --white-alpha-02: rgba(255, 255, 255, 0.02);        /* Weiß 2% Transparenz */
    --white-alpha-03: rgba(255, 255, 255, 0.03);        /* Weiß 3% Transparenz */
    --white-alpha-04: rgba(255, 255, 255, 0.04);        /* Weiß 4% Transparenz */
    --white-alpha-05: rgba(255, 255, 255, 0.05);        /* Weiß 5% Transparenz */
    --white-alpha-08: rgba(255, 255, 255, 0.08);        /* Weiß 8% Transparenz */
    --white-alpha-10: rgba(255, 255, 255, 0.1);         /* Weiß 10% Transparenz */
    --white-alpha-15: rgba(255, 255, 255, 0.15);        /* Weiß 15% Transparenz */
    --white-alpha-20: rgba(255, 255, 255, 0.2);         /* Weiß 20% Transparenz */
    --white-alpha-30: rgba(255, 255, 255, 0.3);         /* Weiß 30% Transparenz */
    --white-alpha-40: rgba(255, 255, 255, 0.4);         /* Weiß 40% Transparenz */
    --white-alpha-50: rgba(255, 255, 255, 0.5);         /* Weiß 50% Transparenz */
    --white-alpha-60: rgba(255, 255, 255, 0.6);         /* Weiß 60% Transparenz */
    --white-alpha-70: rgba(255, 255, 255, 0.7);         /* Weiß 70% Transparenz */
    --white-alpha-75: rgba(255, 255, 255, 0.75);        /* Weiß 75% Transparenz */
    --white-alpha-90: rgba(255, 255, 255, 0.9);         /* Weiß 90% Transparenz */

    /* Green Alpha Values - Primary (74, 222, 128) */
    --green-alpha-05: rgba(74, 222, 128, 0.05);         /* Grün 5% Transparenz */
    --green-alpha-06: rgba(74, 222, 128, 0.06);         /* Grün 6% Transparenz */
    --green-alpha-10: rgba(74, 222, 128, 0.1);          /* Grün 10% Transparenz */
    --green-alpha-12: rgba(74, 222, 128, 0.12);         /* Grün 12% Transparenz */
    --green-alpha-15: rgba(74, 222, 128, 0.15);         /* Grün 15% Transparenz */
    --green-alpha-20: rgba(74, 222, 128, 0.2);          /* Grün 20% Transparenz */
    --green-alpha-25: rgba(74, 222, 128, 0.25);         /* Grün 25% Transparenz */
    --green-alpha-30: rgba(74, 222, 128, 0.3);          /* Grün 30% Transparenz */
    --green-alpha-35: rgba(74, 222, 128, 0.35);         /* Grün 35% Transparenz */
    --green-alpha-40: rgba(74, 222, 128, 0.4);          /* Grün 40% Transparenz */  
    --green-alpha-50: rgba(74, 222, 128, 0.5);          /* Grün 50% Transparenz */
    --green-alpha-60: rgba(74, 222, 128, 0.6);          /* Grün 60% Transparenz */
    --green-alpha-70: rgba(74, 222, 128, 0.7);          /* Grün 70% Transparenz */
    --green-alpha-85: rgba(74, 222, 128, 0.85);         /* Grün 85% Transparenz */
    --green-alpha-90: rgba(74, 222, 128, 0.9);          /* Grün 90% Transparenz */
    --green-alpha-95: rgba(74, 222, 128, 0.95);         /* Grün 95% Transparenz */
    --green-transparent: rgba(74, 222, 128, 0);         /* Vollständig transparentes Grün */

    /* Green Secondary (64, 224, 144) */
    --green-secondary: rgba(64, 224, 144, 1);           /* Sekundäres Grün */
    --green-secondary-alpha-08: rgba(64, 224, 144, 0.08); /* Sekundäres Grün 8% */
    --green-secondary-alpha-15: rgba(64, 224, 144, 0.15); /* Sekundäres Grün 15% */
    --green-secondary-alpha-20: rgba(64, 224, 144, 0.2);  /* Sekundäres Grün 20% */
    --green-secondary-alpha-30: rgba(64, 224, 144, 0.3);  /* Sekundäres Grün 30% */
    --green-secondary-alpha-60: rgba(64, 224, 144, 0.6);  /* Sekundäres Grün 60% */
    --green-secondary-alpha-80: rgba(64, 224, 144, 0.8);  /* Sekundäres Grün 80% */
    --green-secondary-10: rgba(34, 197, 94, 0.1);         /* Sekundäres Grün 10% - Success */

    /* Red/Error Alpha Values */
    --error-transparent: rgba(239, 68, 68, 0);          /* Transparentes Fehlerrot */
    --error-alpha-10: rgba(239, 68, 68, 0.1);           /* Fehlerrot 10% */
    --error-alpha-15: rgba(239, 68, 68, 0.15);          /* Fehlerrot 15% */
    --error-alpha-20: rgba(239, 68, 68, 0.2);           /* Fehlerrot 20% */
    --error-alpha-25: rgba(239, 68, 68, 0.25);          /* Fehlerrot 25% */
    --error-alpha-30: rgba(239, 68, 68, 0.3);           /* Fehlerrot 30% */
    --error-alpha-40: rgba(239, 68, 68, 0.4);           /* Fehlerrot 40% */
    --error-alpha-50: rgba(239, 68, 68, 0.5);           /* Fehlerrot 50% */
    --error-alpha-60: rgba(239, 68, 68, 0.6);           /* Fehlerrot 60% */
    --error-darker-10: rgba(185, 28, 28, 0.1);          /* Sehr dunkles Fehlerrot 10% */
    --error-darker-20: rgba(220, 38, 38, 0.2);          /* Dunkles Fehlerrot 20% */
    --error-darker-30: rgba(220, 38, 38, 0.3);          /* Dunkles Fehlerrot 30% */

    /* Black Alpha Values */
    --black-alpha-03: rgba(0, 0, 0, 0.03);              /* Schwarz 3% Transparenz */
    --black-alpha-08: rgba(0, 0, 0, 0.08);              /* Schwarz 8% Transparenz */
    --black-alpha-10: rgba(0, 0, 0, 0.1);               /* Schwarz 10% Transparenz */
    --black-alpha-12: rgba(0, 0, 0, 0.12);              /* Schwarz 12% Transparenz */
    --black-alpha-15: rgba(0, 0, 0, 0.15);              /* Schwarz 15% Transparenz */
    --black-alpha-30: rgba(0, 0, 0, 0.3);               /* Schwarz 30% Transparenz */
    --black-alpha-40: rgba(0, 0, 0, 0.4);               /* Schwarz 40% Transparenz */
    --black-alpha-50: rgba(0, 0, 0, 0.5);               /* Schwarz 50% Transparenz */
    --black-alpha-60: rgba(0, 0, 0, 0.6);               /* Schwarz 60% Transparenz */
    --black-alpha-70: rgba(0, 0, 0, 0.7);               /* Schwarz 70% Transparenz */
    --black-alpha-75: rgba(0, 0, 0, 0.75);              /* Schwarz 75% Transparenz */
    --black-alpha-80: rgba(0, 0, 0, 0.8);               /* Schwarz 80% Transparenz */
    --black-alpha-85: rgba(0, 0, 0, 0.85);              /* Schwarz 85% Transparenz */
    --black-alpha-90: rgba(0, 0, 0, 0.9);               /* Schwarz 90% Transparenz */

    /* Surface Alpha Values */
    --surface-0-alt: #0a0a0a;                           /* Alternativer Haupthintergrund */
    --surface-dark-95: rgba(20, 20, 20, 0.95);          /* Dunkle Surface 95% */
    --surface-dark-98: rgba(15, 15, 15, 0.98);          /* Sehr dunkle Surface 98% */
    --surface-modal-98: rgba(26, 26, 26, 0.98);         /* Modal Hintergrund 98% */
    --surface-medium-85: rgba(40, 40, 40, 0.85);        /* Mittlere Surface 85% */
    --surface-medium-92: rgba(35, 35, 35, 0.92);        /* Mittlere Surface 92% */
    --surface-medium-95: rgba(44, 44, 44, 0.95);        /* Mittlere Surface 95% */
    
    /* Other Alpha Values */
    --tertiary-alpha-50: rgba(136, 136, 136, 0.5);      /* Tertiär 50% Transparenz */

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)); /* Primärgradient - Hauptgradient in Akzentfarbe */

    /* ===== UI COMPONENTS ===== */
    --card-radius: 16px;                                /* Card border radius */

    /* ===== SPECIAL EFFECTS ===== */
    --glitch-cyan: #00ff80;               /* Glitch Effekt Cyan - Für digitale Störungseffekte */
    --green-transparent: rgba(74, 222, 128, 0); /* Transparentes Grün für Ripple Ende - Für Button-Animationen */
    --glitch-red: #ff0040;                /* Glitch Effekt Rot - Für digitale Störungseffekte */
    --skeleton-highlight: #3a3a3a;        /* Skeleton Loading Highlight - Hervorhebung für Ladeanimationen */
    --warning-yellow-30: rgba(255, 235, 59, 0.3);    /* Warngelb 30% Transparenz - Für subtile Warnungshinweise */
    --warning-yellow-alpha: rgba(255, 235, 59, 0.4); /* Warngelb 40% Transparenz - Für Warnungshinweise */
    --warning-yellow-60: rgba(255, 235, 59, 0.6);    /* Warngelb 60% Transparenz - Für starke Warnungshinweise */

    /* ===== BACKDROP FILTERS ===== */
    --blur-strong: blur(20px);                       /* Starker Blur-Effekt - Für Glasmorphismus-Effekte */
    --blur-light: blur(10px);                 /* Leichter Blur-Effekt - Für subtile Unschärfe */


    /* ===== LOADING SCREEN FARBEN ===== */
    --loading-bg: linear-gradient(135deg, var(--surface-0) 0%, var(--surface-0-alt) 50%, var(--surface-0) 100%); /* Loading Hintergrund */
    --loading-cube-shadow: var(--green-alpha-50); /* Loading Cube Schatten */


    /* ===== 3D / MOTION ===== */
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-center: 0;
    --pointer-from-top: 0.5;
    --pointer-from-left: 0.5;
    --card-opacity: 0;

}

/* =================================
   🎯 FARBPALETTE ENDE
   ================================= */

    

/* Reset and Base Styles */



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* FIXED: Verhindert Über-Scrollen auf iPad/Tablets */
    height: 100%;
    position: relative;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--surface-0);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    /* FIXED: Verhindert Über-Scrollen */
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
    /* Safe Area Inset für alle Seiten auf body-level */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

/*
//
// =================================================================
   ████████████████████████████████████████████████████████████████
   ███                                                          ███
   ███                        INDEX SEITE                       ███
   ███                   HAUPTBEREICHE STRUKTUR                 ███
   ███                                                          ███
   ████████████████████████████████████████████████████████████████
   ================================================================= //
//
//
*/

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                    HEADER SECTION                   ███
       ███               NAVIGATION SYSTEM KOMPLETT            ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* Header Navigation Fade-in Animations */
.header {
    position: fixed;
    top: env(safe-area-inset-top); /* Safe Area Inset für den oberen Bereich */
    left: env(safe-area-inset-left); /* Safe Area Inset für den linken Bereich */
    right: env(safe-area-inset-right); /* Safe Area Inset für den rechten Bereich */
    width: auto; /* Auto-width um mit safe-area-insets zu arbeiten */
    z-index: 999;
    /* Ultra-Premium Apple iOS Liquid Glass Effekt - Optimiert ohne Helligkeit */
    background: var(--white-alpha-04);
    backdrop-filter: blur(28px) saturate(120%) contrast(105%);
    -webkit-backdrop-filter: blur(28px) saturate(120%) contrast(105%);
    border: none;
    
    box-shadow: 
        0 1px 0 var(--white-alpha-08) inset,
        0 8px 32px var(--black-alpha-08),
        0 2px 8px var(--black-alpha-03);
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(0);
    will-change: backdrop-filter, background, box-shadow;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Smooth fade-in animation for header */
    opacity: 0;
    animation: headerFadeIn 1.5s ease-out 0.2s forwards;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        var(--white-alpha-08) 0%, 
        var(--white-alpha-03) 25%, 
        var(--white-alpha-01) 50%, 
        var(--white-alpha-02) 75%, 
        var(--white-alpha-05) 100%
    );
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
}

.header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 200% 25% at center top, 
        var(--white-alpha-08) 0%, 
        var(--white-alpha-04) 15%, 
        var(--white-alpha-02) 30%, 
        var(--white-alpha-01) 50%, 
        transparent 70%
    );
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: soft-light;
}

/* Erweiterte Glasmorphismus-Eigenschaften für Navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    padding-left: max(50px, env(safe-area-inset-left));
    padding-right: max(50px, env(safe-area-inset-right));
    padding-top: max(20px, env(safe-area-inset-top));
    height: 80px;
    max-width: 100%;
    position: relative;
}

/* DESKTOP LAYOUT: Logo Left | Navigation Center | Social Right */
.nav-logo {
    flex: 0 0 auto;
    order: 1;
}

.nav-logo a {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
    /* Smooth fade-in animation for logo */
    opacity: 0;
    transform: translateY(-10px);
    animation: logoFadeIn 1s ease-out 0.1s forwards;
}

.nav-logo a:hover {
    color: var(--brand-primary);
    text-shadow: 0 0 10px var(--loading-cube-shadow);
}

/* DESKTOP: Navigation Links in CENTER */
.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 2;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    /* Smooth fade-in animation for navigation links */
    opacity: 0;
    transform: translateY(-10px);
    animation: navLinkFadeIn 1s ease-out forwards;
}

.nav-links a:nth-child(1) { animation-delay: 0.4s; }
.nav-links a:nth-child(2) { animation-delay: 0.5s; }
.nav-links a:nth-child(3) { animation-delay: 0.6s; }
.nav-links a:nth-child(4) { animation-delay: 0.7s; }

.nav-links a:hover {
    color: var(--brand-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-primary);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* DESKTOP: Social Icons on RIGHT */
.nav-social {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
    order: 3;
}

/* MOBILE: Social Icons in CENTER (hidden on desktop) */
.nav-social-mobile {
    display: none;
    gap: 12px;
    align-items: center;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.social-icon {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--white-alpha-05);
    border: 1px solid var(--white-alpha-10);
    /* Smooth fade-in animation for social icons */
    opacity: 0;
    transform: translateY(-10px);
    animation: socialIconFadeIn 1s ease-out forwards;
}

.nav-social .social-icon:nth-child(1) { animation-delay: 0.8s; }
.nav-social .social-icon:nth-child(2) { animation-delay: 0.9s; }
.nav-social .social-icon:nth-child(3) { animation-delay: 1s; }

.social-icon:hover {
    color: var(--brand-primary);
    background: var(--green-alpha-10);
    border-color: var(--green-alpha-30);

    box-shadow: 0 5px 15px var(--green-alpha-30);
}

/* =========================== */
/* IMPROVED MOBILE HAMBURGER MENU STYLES */
/* =========================== */

/* Mobile Menu Toggle Button (Hamburger) - ALWAYS VISIBLE */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: var(--surface-transparent);
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10002; /* Erhöht um über dem Mobile Menu Overlay zu stehen */
    transition: transform 0.3s ease;
    order: 4;
    position: relative; /* Ensure stacking context */
    color: var(--text-primary) !important;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
}

.hamburger-line {
    display: block !important;
    height: 3px !important;
    width: 100% !important;
    background: var(--text-primary) !important; /* Hardcoded white to override any CSS */
    background-color: var(--text-primary) !important;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    border: none !important;
    box-shadow: none !important;
}

/* Force white color on mobile specifically */
@media (max-width: 900px) {
    .hamburger-line {
        background: var(--text-primary) !important;
        background-color: var(--text-primary) !important;
        color: var(--text-primary) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .mobile-menu-toggle .hamburger-line {
        background: var(--text-primary) !important;
        background-color: var(--text-primary) !important;
    }
}

/* Hamburger Animation - Transform to X when active - ENHANCED */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    background: var(--green-secondary) !important;
    box-shadow: 0 0 20px var(--green-secondary-alpha-60);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0) rotate(180deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    background: var(--green-secondary) !important;
    box-shadow: 0 0 20px var(--green-secondary-alpha-60);
}

/* IMPROVED Mobile Menu Overlay - MODERNIZED */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* Dynamic viewport height für mobile Browser */
    background: linear-gradient(135deg, var(--black-alpha-40), var(--black-alpha-80));
    backdrop-filter: blur(12px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Fallback für Browser ohne 100dvh Support */
@supports not (height: 100dvh) {
    .mobile-menu-overlay {
        height: 100vh;
    }
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* MODERN GLASS-MORPHISM MENU PANEL */
.mobile-menu-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100dvh; /* Dynamic viewport height für mobile Browser */
    background: linear-gradient(135deg, 
        var(--surface-dark-95) 0%, 
        var(--surface-medium-85) 50%,
        var(--surface-dark-95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid var(--white-alpha-10);
    box-shadow: 
        -20px 0 80px var(--black-alpha-80),
        inset 1px 0 0 var(--white-alpha-05);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    /* Safe Area Inset Implementation mit iOS 11.0-11.2 Fallbacks */
    padding-top: 70px; /* Fallback */
    padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
    padding-top: max(70px, calc(env(safe-area-inset-top) + 20px)); /* Modern browsers */
    
    padding-right: 30px; /* Fallback */
    padding-right: constant(safe-area-inset-right); /* iOS 11.0-11.2 */
    padding-right: max(30px, calc(env(safe-area-inset-right) + 30px)); /* Modern browsers */
    
    padding-bottom: 30px; /* Fallback */
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 30px)); /* Modern browsers */
    
    padding-left: 30px; /* Fallback */
    padding-left: constant(safe-area-inset-left); /* iOS 11.0-11.2 */
    padding-left: max(30px, calc(env(safe-area-inset-left) + 30px)); /* Modern browsers */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilung: Inhalt oben, Social Icons unten */
    z-index: 10002; /* Erhöht um über dem Mobile Menu Overlay zu stehen */
    overflow-y: auto; /* Allow scrolling if content is too long */
    
    /* GRÜNER SCROLLBAR FIX: Scrollbar für mobile Menü ausblenden */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* GRÜNER SCROLLBAR FIX: Webkit-Scrollbar für mobile Menü ausblenden */
.mobile-menu-content::-webkit-scrollbar {
    display: none; /* Safari und Chrome */
}

/* CSS Feature Detection Support */
@supports not (padding: env(safe-area-inset-top)) {
    .mobile-menu-content {
        padding: 70px 30px 50px 30px !important; /* Extra Fallback für nicht unterstützte Browser */
    }
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

/* MODERN NAVIGATION LINKS - ENHANCED WITH BOUNCE ANIMATION */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
    align-items: flex-start;
    width: 100%;
    flex: 0 0 auto; /* Nimmt nur benötigten Platz */
    margin-top: 20px; /* Reduzierter Abstand vom X zu den Buttons */
}

.mobile-nav-link {
    color: var(--white-alpha-90);
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1.2px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    padding: 18px 24px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: left;
    background: var(--white-alpha-02);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--white-alpha-05);
    backdrop-filter: blur(10px);
    
    /* INITIAL STATE - Hidden off-screen to the right */
    transform: translateX(100%);
    opacity: 0;
}

/* BOUNCE ANIMATION KEYFRAMES */
@keyframes mobileNavBounceIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    60% {
        transform: translateX(-8px);
        opacity: 1;
    }
    80% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* INDIVIDUAL ANIMATION DELAYS FOR STAGGERED EFFECT */
.mobile-menu-overlay.active .mobile-nav-link:nth-child(1) {
    animation: mobileNavBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards;
}

.mobile-menu-overlay.active .mobile-nav-link:nth-child(2) {
    animation: mobileNavBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
}

.mobile-menu-overlay.active .mobile-nav-link:nth-child(3) {
    animation: mobileNavBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;
}

.mobile-menu-overlay.active .mobile-nav-link:nth-child(4) {
    animation: mobileNavBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s forwards;
}
/* RESET ANIMATION WHEN MENU IS CLOSED - FIX FOR LANGUAGE TOGGLE */
.mobile-menu-overlay:not(.active) .mobile-nav-link {
    animation: none !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

.mobile-menu-overlay:not(.active) .mobile-nav-language {
    animation: none !important;
    transform: scale(0) !important;
    opacity: 0 !important;
}

.mobile-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        var(--green-secondary-alpha-15), 
        transparent);
    transition: left 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.mobile-nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, 
        var(--green-secondary-alpha-80), 
        var(--green-secondary-alpha-30));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.mobile-nav-link:hover::before,
.mobile-nav-link.active::before {
    left: 100%;
}

.mobile-nav-link:hover::after,
.mobile-nav-link.active::after {
    transform: scaleY(1);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--green-secondary);
    transform: translateX(12px) scale(1.02);
    background: var(--green-secondary-alpha-08);
    border-color: var(--green-secondary-alpha-20);
    box-shadow: 
        0 8px 32px var(--green-secondary-alpha-15),
        inset 0 1px 0 var(--white-alpha-10);
    text-shadow: 0 0 20px var(--green-secondary-alpha-60);
}

/* Mobile Language Toggle WITH BOUNCE ANIMATION */
.mobile-nav-language {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 20px 0;
    padding: 15px 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    
    /* INITIAL STATE - Hidden and scaled down */
    transform: scale(0);
    opacity: 0;
}

.mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--white-alpha-05);
    border: 1px solid var(--white-alpha-20);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

/* LANGUAGE BUTTON BOUNCE ANIMATION KEYFRAMES */
@keyframes langButtonBounceIn {
    0% {
        transform: scale(0) rotate(-15deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* LANGUAGE BUTTON ANIMATION - Comes in after nav links */
.mobile-menu-overlay.active .mobile-nav-language {
    animation: langButtonBounceIn 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
}

.mobile-lang-btn:hover {
    background: var(--green-alpha-10);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 15px var(--green-alpha-20);
    transform: scale(1.05);
}

.mobile-lang-btn:active {
    transform: scale(0.95);
}

/* Mobile Social Icons in Menu - IMMER GANZ UNTEN */
.mobile-nav-social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: auto; /* Drückt die Social Icons ganz nach unten */
    flex-shrink: 0; /* Verhindert Schrumpfen */
    
    /* Safe Area Inset mit iOS Fallbacks und zusätzlichem Padding */
    margin-bottom: 3%; /* Fallback */
    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    margin-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)); /* Modern browsers */
    
    padding-bottom: 15px; /* Fallback */
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom: calc(env(safe-area-inset-bottom) + 15px); /* Modern browsers */
}

/* ===== MOBILE MENU LANGUAGE ANIMATION ===== */
/* Special animations for mobile menu language toggle */
.mobile-nav-link {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-nav-link.language-changing {
    opacity: 0;
    transform: translateX(-30px) scale(0.9);
    filter: blur(2px);
}

.mobile-nav-link.language-changed {
    opacity: 1;
    transform: translateX(0px) scale(1);
    box-shadow: 0 0 25px var(--green-alpha-50);
    filter: blur(0px);
    background: var(--green-alpha-10);
    border-color: var(--green-alpha-30);
}

.mobile-lang-btn {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-lang-btn.language-changing {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(2px);
}

.mobile-lang-btn.language-changed {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 20px var(--green-alpha-60);
    background: var(--green-alpha-20);
    border-color: var(--green-alpha-50);
    filter: blur(0px);
}

/* Add smooth pulse effect during language change */
@keyframes mobileLangPulse {
    0% {
        box-shadow: 0 0 0 0 var(--green-alpha-70);
    }
    70% {
        box-shadow: 0 0 0 25px var(--green-transparent);
    }
    100% {
        box-shadow: 0 0 0 0 var(--green-transparent);
    }
}

.mobile-lang-btn.pulse-animation {
    animation: mobileLangPulse 1s ease-out;
}
/* CSS Feature Detection Support für Social Icons */
@supports not (margin-bottom: env(safe-area-inset-bottom)) {
    .mobile-nav-social {
        margin-bottom: 40px !important; /* Extra Fallback für mehr Abstand */
        padding-bottom: 25px !important;
    }
}

.mobile-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: var(--white-alpha-05);
    border: 1px solid var(--white-alpha-20);
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-social-icon:hover {
    background: var(--green-alpha-10);
    border-color: var(--brand-primary);
    box-shadow: 0 0 15px var(--green-alpha-20);
    transform: scale(1.1);
}

.mobile-social-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0.8);
    transition: all 0.3s ease;
}

.mobile-social-icon:hover img {
    filter: brightness(1.2) drop-shadow(0 0 8px var(--brand-primary));
}

/* =========================== */
/* MOBILE MENU ANPASSUNGEN FÜR KLEINE BILDSCHIRME */
/* =========================== */

/* Für kleine Handys (Höhe unter 700px) */
@media screen and (max-height: 700px) {
    .mobile-menu-content {
        height: 100dvh; /* Dynamic viewport height */
        
        /* Safe Area Inset mit iOS Fallbacks für kleine Bildschirme */
        padding-top: 50px !important; /* Fallback */
        padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0-11.2 */
        padding-top: max(50px, calc(env(safe-area-inset-top) + 15px)) !important; /* Modern browsers */
        
        padding-right: 30px !important; /* Fallback */
        padding-right: constant(safe-area-inset-right) !important; /* iOS 11.0-11.2 */
        padding-right: max(30px, calc(env(safe-area-inset-right) + 30px)) !important; /* Modern browsers */
        
        padding-bottom: 15px !important; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        padding-bottom: max(15px, calc(env(safe-area-inset-bottom) + 15px)) !important; /* Modern browsers */
        
        padding-left: 30px !important; /* Fallback */
        padding-left: constant(safe-area-inset-left) !important; /* iOS 11.0-11.2 */
        padding-left: max(30px, calc(env(safe-area-inset-left) + 30px)) !important; /* Modern browsers */
    }
    
    .mobile-nav-links {
        margin-top: 10px !important;
        gap: 6px !important;
    }
    
    .mobile-nav-link {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    .mobile-nav-social {
        margin-bottom: 15px !important; /* Fallback */
        margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        margin-bottom: max(15px, calc(env(safe-area-inset-bottom) + 15px)) !important; /* Modern browsers */
        
        padding-bottom: 10px !important; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important; /* Modern browsers */
    }
    
    /* Fallback für Browser ohne safe-area-inset Support */
    @supports not (padding: env(safe-area-inset-bottom)) {
        .mobile-menu-content {
            padding: 50px 30px 35px 30px !important;
        }
        
        .mobile-nav-social {
            margin-bottom: 25px !important;
            padding-bottom: 15px !important;
        }
    }
}

/* Für sehr kleine Handys (Höhe unter 600px) */
@media screen and (max-height: 600px) {
    .mobile-menu-content {
        height: 100dvh; /* Dynamic viewport height */
        
        /* Safe Area Inset mit iOS Fallbacks für sehr kleine Bildschirme */
        padding-top: 40px !important; /* Fallback */
        padding-top: constant(safe-area-inset-top) !important; /* iOS 11.0-11.2 */
        padding-top: max(40px, calc(env(safe-area-inset-top) + 15px)) !important; /* Modern browsers */
        
        padding-right: 25px !important; /* Fallback */
        padding-right: constant(safe-area-inset-right) !important; /* iOS 11.0-11.2 */
        padding-right: max(25px, calc(env(safe-area-inset-right) + 25px)) !important; /* Modern browsers */
        
        padding-bottom: 10px !important; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important; /* Modern browsers */
        
        padding-left: 25px !important; /* Fallback */
        padding-left: constant(safe-area-inset-left) !important; /* iOS 11.0-11.2 */
        padding-left: max(25px, calc(env(safe-area-inset-left) + 25px)) !important; /* Modern browsers */
    }
    
    .mobile-nav-links {
        margin-top: 5px !important;
        gap: 4px !important;
    }
    
    .mobile-nav-link {
        padding: 10px 18px !important;
        font-size: 15px !important;
    }
    
    .mobile-nav-social {
        margin-bottom: 10px !important; /* Fallback */
        margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        margin-bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important; /* Modern browsers */
        
        padding-bottom: 10px !important; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important; /* Modern browsers */
    }
    
    /* Fallback für Browser ohne safe-area-inset Support */
    @supports not (padding: env(safe-area-inset-bottom)) {
        .mobile-menu-content {
            padding: 40px 25px 30px 25px !important;
        }
        
        .mobile-nav-social {
            margin-bottom: 20px !important;
            padding-bottom: 15px !important;
        }
    }
}

    /*
    //
    // =========================================================
        ███████████████████████████████████████████████████████
        ███                                                 ███
        ███                FRONT PAGE SECTION               ███
        ███               HERO BEREICH KOMPLETT             ███
        ███                                                 ███
        ███████████████████████████████████████████████████████
        ========================================================= //
    //
    //
    */

/* =========================== */
/* FIXED HEADER WITH NEW LAYOUT */
/* =========================== */

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Fix für Touch-Geräte: Verhindert Mitbewegen beim Scrollen */
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Fix für Touch-Geräte: Verhindert Zoom und Bewegung beim Scrollen */
    transform: translateZ(0);
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Verhindert Touch-Gesten auf dem Bild */
    touch-action: pan-y;
    pointer-events: none;
}

.hero-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

.hero-content {
    text-align: left;
    z-index: 1;
    position: relative;
    width: 100%;
    padding: 0 50px;
    padding-left: max(50px, env(safe-area-inset-left));
    padding-right: max(50px, env(safe-area-inset-right));
    max-width: 1200px;
    margin-left: 10%;
}

.hero-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-shadow: 2px 2px 8px var(--black-alpha-80);
    opacity: 0;
    transform: translateY(50px);
    animation: floatIn 1.2s ease-out 0.3s forwards;
}

.hero-subtitle {
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 300;
    letter-spacing: 0.05em;
    opacity: 0;
    margin-top: 20px;
    margin-left: 0;
    transform: translateY(30px);
    animation: floatIn 1.2s ease-out 1s forwards;
}
/* Hero Demo Reel Button */
.hero-demo-reel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    margin-top: 30px;
    background: var(--brand-primary);
    color: var(--surface-0);
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 25px var(--green-alpha-40);
    opacity: 0;
    transform: translateY(30px);
    animation: floatIn 1.2s ease-out 1.5s forwards;
    backdrop-filter: blur(10px);
}

.hero-demo-reel-btn:hover {
    background: var(--brand-primary);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 35px var(--green-alpha-60);
}

.hero-demo-reel-btn:active {
    transform: translateY(0) scale(0.98);
}

.hero-demo-reel-btn .play-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.hero-demo-reel-btn span {
    font-size: inherit;
    font-weight: inherit;
}

/* Float in animation keyframes */
@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

/* Header fade-in animation keyframes */
@keyframes headerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile-optimized header fade-in - no transforms to prevent conflicts */
@keyframes headerFadeInMobile {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Navigation links fade-in animation keyframes */
@keyframes navLinkFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Social icons fade-in animation keyframes */
@keyframes socialIconFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo fade-in animation keyframes */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Placeholder Image Styles */
.placeholder-image {
    background: var(--gradient-secondary);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

/* Real Image Styles for 2400x1400px format */
.about-placeholder,
.customer-placeholder,
.university-logo,
.hero-image,
.project-placeholder {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

    /*
    //
    // =========================================================
        ███████████████████████████████████████████████████████
        ███                                                 ███
        ███                 MY STORY SECTION                ███
        ███                 ABOUT ME PREVIEW                ███
        ███                                                 ███
        ███████████████████████████████████████████████████████
        ========================================================= //
    //
    //
    */

    /* Story Section */
    .story-section {
        padding: 100px 50px;
        background: var(--surface-0);
        color: var(--text-primary);
        position: relative;
        z-index: 10;
    }

    .story-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }

    .story-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .story-content h2 {
        font-size: 72px;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 30px;
    }

    .divider {
        width: 60px;
        height: 2px;
        background: var(--brand-primary);
        margin-bottom: 30px;
    }

    .read-more-btn {
        background: var(--surface-transparent);
        color: var(--brand-primary);
        border: 2px solid var(--brand-primary);
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        width: fit-content;
        position: relative;
        overflow: hidden;
    }

    .read-more-btn:hover {
        background: var(--brand-white);
        color: var(--surface-0);
        border: 2px solid var(--brand-white);
    
        box-shadow: 0 8px 25px var(--shadow-medium);
    }

    .story-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .story-info h3 {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 3%;
    }

    .story-info p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
        opacity: 0.8;
    }

    /*
    //
    // =========================================================
        ███████████████████████████████████████████████████████
        ███                                                 ███
        ███                PROJEKTE SECTION                 ███
        ███               PORTFOLIO SHOWCASE                ███
        ███                                                 ███
        ███████████████████████████████████████████████████████
        ========================================================= //
    //
    //
    */

            /*
            //
            // =====================================================
                ███████████████████████████████████████████████
                ███                                         ███
                ███             PROJEKT CARDS               ███
                ███          PORTFOLIO GRID LAYOUT          ███
                ███                                         ███
                ███████████████████████████████████████████████
            ===================================================== //
            //
            //
            */

            /* Projects Section */
            .projects-section {
                padding: 100px 50px;
                background: var(--surface-0);
                position: relative;
            }

            .projects-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(ellipse at center, var(--green-alpha-10) 0%, var(--green-alpha-05) 50%, transparent 70%);
                pointer-events: none;
                z-index: 1;
            }

            .projects-section > * {
                position: relative;
                z-index: 2;
            }

            .projects-title {
                font-size: clamp(60px, 12vw, 120px);
                font-weight: 800;
                text-align: center;
                margin-bottom: 40px;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                letter-spacing: -0.02em;
            }

            .projects-description {
                max-width: 800px;
                margin: 0 auto 80px;
                text-align: center;
                font-size: 18px;
                line-height: 1.6;
                opacity: 0.8;
            }

            /* ULTRA-SIMPLIFIED PROJECTS GRID - LINEAR SCALING */
            .projects-grid {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 2%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: clamp(2%, 3vw, 3%);
                align-items: stretch;
            }
            
            /* Zentriert einzelne Karten horizontal und macht einzelne Karten schmaler */
            .projects-grid {
                justify-items: center;
            }
            
            .projects-grid .project-card-wrapper:only-child {
                max-width: 60%;
            }

            /* Project image container for proper responsive images */
            .project-image-container {
                position: relative;
                width: 100%;
                aspect-ratio: 16/10; /* Consistent aspect ratio */
                overflow: hidden;
                border-radius: var(--card-radius);
                background: var(--surface-2);
            /* Ensure image and placeholder corners match the card radius on all devices */
            .project-card .image-wrapper,
            .project-card .project-image-container,
            .project-card .lazy-image-container,
            .project-card .project-card-image,
            .project-card img,
            .project-placeholder,
            .lazy-image-container {
                border-radius: var(--card-radius) !important;
                overflow: hidden;
            }

            }

            /* Apply same rules to lazy-image-container within project cards */
            .project-card .lazy-image-container, .project-image-container, .project-card-image, .project-card img, .project-placeholder, .lazy-image-container {
                position: relative;
                width: 100%;
                aspect-ratio: 16/10; /* Consistent aspect ratio */
                overflow: hidden;
                border-radius: var(--card-radius);
                background: var(--surface-2);
            }

            .project-card-image {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Cover the entire container */
                object-position: center; /* Center the image */
                transition: transform 0.3s ease;
            }

            /* Apply image rules to any img within project cards */
            .project-card img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Cover the entire container */
                object-position: center; /* Center the image */
                transition: transform 0.3s ease;
            }

            /* Hover scale effect removed per user request */
            .project-card:hover .project-card-image,
            .project-card:hover img {
                transform: scale(1.0); /* No zoom on hover */
            }
            /* =========================
               POPUP MODAL ACTION BUTTONS (New Style)
               ========================= */
            
            /* Updated modal action buttons with rectangular rounded design and glow */
            .modal-image-actions {
                position: absolute;
                bottom: 16px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 12px;
                z-index: 20;
            }
            /* =========================
               YOUTUBE-STYLE LIKE COUNTER ANIMATION
               ========================= */

            /* Like counter container for smooth number animation */
            .like-count-container {
                position: relative;
                display: inline-block;
                overflow: hidden;
                min-width: 20px;
                height: 1.2em;
                vertical-align: middle;
            }
            /* Modal-specific like counter container - FIXED FOR POPUP ANIMATION */
            .project-modal-like-section .like-count-container {
                position: relative !important;
                display: inline-block !important;
                overflow: hidden !important;
                min-width: 30px !important;
                height: 1.5em !important;
                vertical-align: middle !important;
                z-index: 10 !important;
            }

            /* Ensure modal like counts have proper positioning */
            .project-modal-like-count {
                position: relative !important;
                display: inline-block !important;
                z-index: 1 !important;
            }

            /* Fix modal container context for animations */
            .project-modal-like-section {
                position: relative !important;
                overflow: visible !important;
            }
            /* =========================
               COORDINATED POPUP LIKE ANIMATION
               New: All elements (icon, text, count) animate together
               ========================= */

            /* Container for coordinated popup animation */
            .modal-like-content-container {
                position: relative;
                display: flex;
                align-items: center;
                gap: 8px;
                overflow: hidden;
                min-height: 1.5em;
                width: 100%;
            }

            /* Wrapper for each animated group */
            .modal-like-content-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                transition: transform 0.25s ease, opacity 0.25s ease;
            }

            /* Animation states for coordinated movement */
            .modal-like-content-wrapper.slide-out-up {
                transform: translateY(-100%);
                opacity: 0;
            }

            .modal-like-content-wrapper.slide-out-down {
                transform: translateY(100%);
                opacity: 0;
            }

            .modal-like-content-wrapper.slide-in-from-up {
                transform: translateY(-100%);
                opacity: 0;
            }

            .modal-like-content-wrapper.slide-in-from-down {
                transform: translateY(100%);
                opacity: 0;
            }

            .modal-like-content-wrapper.slide-in-center {
                transform: translateY(0);
                opacity: 1;
            }

            /* Ensure modal elements maintain their styling during animation */
            .modal-like-content-wrapper .like-icon,
            .modal-like-content-wrapper .project-modal-like-text,
            .modal-like-content-wrapper .project-modal-like-count {
                position: relative;
                flex-shrink: 0;
            }

            /* Text animation container - SAME STYLE AS COUNTER ANIMATION */
            .like-text-container {
                position: relative;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
            }

            /* Modal-specific text container */
            .project-modal-like-section .like-text-container {
                position: relative !important;
                display: inline-block !important;
                overflow: hidden !important;
                min-width: 140px !important;
                height: 1.5em !important;
                vertical-align: middle !important;
                z-index: 10 !important;
            }

            /* Like icon animation container - SAME STYLE AS COUNTER AND TEXT */
            .like-icon-container {
                position: relative;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                width: 24px;
                height: 24px;
            }

            /* Modal-specific icon container */
            .project-modal-like-section .like-icon-container {
                position: relative !important;
                display: inline-block !important;
                overflow: hidden !important;
                width: 24px !important;
                height: 24px !important;
                vertical-align: middle !important;
                z-index: 10 !important;
            }

            /* Ensure icons are positioned properly for animation */
            .like-icon {
                position: relative;
                display: block;
                transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                will-change: transform;
            }
            .like-count {
                display: block;
                transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                will-change: transform;
            }

            /* Animation states for smooth number transitions */
            .like-count.slide-out-up {
                animation: slideOutUp 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            }

            .like-count.slide-in-up {
                animation: slideInUp 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            }

            .like-count.slide-out-down {
                animation: slideOutDown 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            }

            .like-count.slide-in-down {
                animation: slideInDown 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            }

            /* Keyframes for YouTube-style number animations */
            @keyframes slideOutUp {
                0% {
                    transform: translateY(0);
                    opacity: 1;
                }
                100% {
                    transform: translateY(-100%);
                    opacity: 0;
                }
            }

            @keyframes slideInUp {
                0% {
                    transform: translateY(100%);
                    opacity: 0;
                }
                100% {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            @keyframes slideOutDown {
                0% {
                    transform: translateY(0);
                    opacity: 1;
                }
                100% {
                    transform: translateY(100%);
                    opacity: 0;
                }
            }

            @keyframes slideInDown {
                0% {
                    transform: translateY(-100%);
                    opacity: 0;
                }
                100% {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            /* Enhanced like button animations */
            .like-btn.liked {
                animation: likeButtonPulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            .project-modal-like-btn.liked {
                animation: likeButtonPulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            @keyframes likeButtonPulse {
                0% {
                    transform: scale(1);
                }
                15% {
                    transform: scale(1.1);
                }
                30% {
                    transform: scale(0.95);
                }
                50% {
                    transform: scale(1.05);
                }
                100% {
                    transform: scale(1);
                }
            }
            
            /* Project Card Container mit 3D Tilt-Effekt */
            .project-card-wrapper {
                perspective: 500px;
                transform: translate3d(0, 0, 0.1px);
                position: relative;
                touch-action: pan-y; /* Erlaubt vertikales Scrollen auf Touch-Geräten */
                display: flex;
                flex-direction: column;
                height: 100%; /* Nimmt die volle Höhe des Grid-Items */
            }

            .project-card-wrapper::before {
                content: '';
                position: absolute;
                inset: -10px;
                background: inherit;
                background-position: inherit;
                border-radius: inherit;
                transition: all 0.5s ease;
                filter: contrast(2) saturate(2) blur(36px);
                transform: scale(0.8) translate3d(0, 0, 0.1px);
                background-size: 100% 100%;
                background-image: radial-gradient(farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%), 
                    hsla(135, 100%, 70%, var(--card-opacity, 0)) 4%, 
                    hsla(135, 50%, 60%, calc(var(--card-opacity, 0) * 0.75)) 10%, 
                    hsla(135, 25%, 50%, calc(var(--card-opacity, 0) * 0.5)) 50%, 
                    hsla(135, 0%, 40%, 0) 100%);
            }

            .project-card-wrapper:hover,
            .project-card-wrapper.active {
                --card-opacity: 1;
            }

            .project-card-wrapper:hover::before,
            .project-card-wrapper.active::before {
                filter: contrast(1) saturate(2) blur(40px) opacity(1);
                transform: scale(0.9) translate3d(0, 0, 0.1px);
            }

            .project-card {
                background: var(--surface-1);
                border-radius: var(--card-radius); /* Unified radius */
                overflow: hidden;
                transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
                border: 1px solid var(--white-alpha-10);
                position: relative;
                cursor: pointer;
                transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg);
                box-shadow: var(--black-alpha-80) calc((var(--pointer-from-left, 0.5) * 10px) - 3px) calc((var(--pointer-from-top, 0.5) * 20px) - 6px) 20px -5px;
                --rotate-x: 0deg;
                --rotate-y: 0deg;
                --pointer-x: 50%;
                --pointer-y: 50%;
                --pointer-from-center: 0;
                --pointer-from-top: 0.5;
                --pointer-from-left: 0.5;
                height: 100%; /* Karte nimmt die volle Höhe des Wrappers */
                display: flex;
                flex-direction: column;
            }

            .project-card * {
                transform: translate3d(0, 0, 0.1px);
            }
            
            /* Re-enable pointer events for interactive elements */
            .project-card .project-info,
            .project-card .like-btn,
            .project-card .project-card-image {
                pointer-events: auto;
            }

            .project-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, var(--green-alpha-10), transparent);
                opacity: 0;
                transition: opacity 0.2s ease;
                pointer-events: none;
            }

            .project-card:hover::before {
                opacity: 1;
            }

            /* 3D Tilt Shine Effect */
            .project-card-shine {
                position: absolute;
                inset: 1px;
                border-radius: 11px;
                background-image: 
                    radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%), 
                        hsl(135, 25%, 80%) 12%, 
                        hsla(135, 40%, 30%, 0.8) 90%);
                mix-blend-mode: overlay;
                filter: brightness(0.8) contrast(1.2);
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 4;
                pointer-events: none;
            }

            .project-card-wrapper:hover .project-card-shine,
            .project-card-wrapper.active .project-card-shine,
            .project-card:hover .project-card-shine,
            .project-card.active .project-card-shine {
                opacity: 1;
            }

            /* 3D Tilt Glare Effect */
            .project-card-glare {
                position: absolute;
                inset: 0;
                border-radius: var(--card-radius); /* Unified radius */
                background-image: 
                    radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%), 
                        hsla(135, 100%, 85%, 0.3) 4%, 
                        hsla(135, 50%, 75%, calc(0.2 * var(--pointer-from-center, 0))) 10%, 
                        hsla(135, 25%, 65%, calc(0.1 * var(--pointer-from-center, 0))) 50%, 
                        transparent 100%);
                mix-blend-mode: soft-light;
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 5;
                pointer-events: none;
            }

            .project-card-wrapper:hover .project-card-glare,
            .project-card-wrapper.active .project-card-glare,
            .project-card:hover .project-card-glare,
            .project-card.active .project-card-glare {
                opacity: 1;
            }

            /* Content Transform */
            .project-card .project-info {
                position: relative;
                z-index: 6;
                transform: translate3d(calc(var(--pointer-from-left, 0.5) * -6px + 3px), calc(var(--pointer-from-top, 0.5) * -6px + 3px), 0.1px) !important;
                transition: transform 0.3s ease;
            }

            .project-card:hover,
            .project-card.active {
                transform: translate3d(0, 0, 0.1px) rotateX(var(--rotate-y, 0deg)) rotateY(var(--rotate-x, 0deg));
            }

            /* Reset transition when not hovering for smooth return */
            .project-card:not(:hover) {
                transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
                transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg) !important;
                --rotate-x: 0deg !important;
                --rotate-y: 0deg !important;
                --pointer-x: 50% !important;
                --pointer-y: 50% !important;
                --pointer-from-center: 0 !important;
                --pointer-from-top: 0.5 !important;
                --pointer-from-left: 0.5 !important;
            }

            .project-placeholder {
                width: 100%;
                aspect-ratio: 16/10; /* Fixed: Consistent aspect ratio across all screen sizes */
                font-size: 18px;
            }

            /* ULTRA-SIMPLIFIED PROJECT INFO - LINEAR SCALING */
            .project-info {
                padding: clamp(3%, 5vw, 5%);
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .project-role {
                font-size: clamp(10px, 1.1vw, 14px);
                color: var(--brand-primary);
                font-weight: 600;
                margin-bottom: clamp(1%, 2vw, 2%);
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            .project-name {
                font-size: clamp(16px, 1.8vw, 24px);
                font-weight: 700;
                margin-bottom: clamp(2%, 3vw, 3%);
            }

            .project-description {
                font-size: clamp(12px, 1.1vw, 14px);
                opacity: 0.8;
                line-height: 1.5;
                margin-bottom: clamp(2%, 3vw, 3%);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .project-contact, .project-phone {
                font-size: 14px;
                opacity: 0.7;
                margin-bottom: 5px;
            }

            .project-social {
                margin-top: 20px;
                display: flex;
                gap: 15px;
            }

            /*
            //
            // =====================================================
                ███████████████████████████████████████████████
                ███                                         ███
                ███             PROJEKT MODAL               ███
                ███          POP-UP FUNKTIONALITÄT          ███
                ███                                         ███
                ███████████████████████████████████████████████
            ===================================================== //
            //
            //
            */

            /*
            //
            // ==========================================================
               ███████████████████████████████████████████████████████
               ███                                                 ███
               ███               PROJECT MODAL SYSTEM              ███
               ███             POPUP & GALLERY KOMPLETT            ███
               ███                                                 ███
               ███████████████████████████████████████████████████████
               ========================================================== //
            //
            //
            */
            /* =========================== */
/* Safe-area variables */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* PROJECT POPUP MODAL STYLES - iOS-CLEAN DESIGN - MODIFIED */

/* =========================
   PROJECT MODAL VIDEO ENHANCEMENTS
   ========================= */

/* Video Loading Overlay for Project Modals */
.gallery-item .video-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface-medium-95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    border-radius: 8px;
}

.gallery-item .video-loading-overlay .video-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.gallery-item .video-loading-overlay .spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 4px solid transparent;
    border-top: 4px solid var(--brand-error-dark);
    border-radius: 8px;
    animation: video-spin 1s linear infinite;
}

.gallery-item .video-loading-overlay .spinner-ring:nth-child(2) {
    animation-delay: 0.3s;
    border-top-color: var(--brand-error);
}

.gallery-item .video-loading-overlay .spinner-ring:nth-child(3) {
    animation-delay: 0.6s;
    border-top-color: var(--brand-error-lightest);
}

@keyframes video-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gallery-item .video-loading-overlay p {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

/* Enhanced Gallery Item Styling */
.gallery-item {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item.active {
    border: 2px solid var(--brand-error-dark);
    box-shadow: 0 0 20px var(--error-darker-30);
}

.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--brand-black);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Video Controls Styling */
.gallery-item video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, var(--black-alpha-80));
}

.gallery-item video::-webkit-media-controls-play-button,
.gallery-item video::-webkit-media-controls-timeline,
.gallery-item video::-webkit-media-controls-volume-slider {
    filter: brightness(1.2);
}

/* Error Message Styling */
.video-error-message {
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--error-darker-30);
    backdrop-filter: blur(10px);
}

.video-error-message p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.video-error-message small {
    opacity: 0.8;
    font-size: 0.75rem;
}

/* Mobile Responsiveness for Video Gallery */
@media (max-width: 768px) {
    .gallery-item {
        min-height: 200px;
    }
    
    .gallery-item .video-loading-overlay .video-spinner {
        width: 40px;
        height: 40px;
    }
    
    .gallery-item .video-loading-overlay .spinner-ring {
        width: 40px;
        height: 40px;
    }
    
    .gallery-play-button {
        font-size: 2.5rem !important;
    }
    
    .gallery-item-title {
        font-size: 0.75rem !important;
        padding: 0.5rem 0 0 0 !important;
    }
}

@media (max-width: 480px) {
    .gallery-item {
        min-height: 150px;
    }
    
    .gallery-play-button {
        font-size: 2rem !important;
    }
}

/* PROJECT POPUP MODAL STYLES - iOS-CLEAN DESIGN - MODIFIED */
            /* =========================== */

            /* Modal Backdrop */
            .project-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10000;
                opacity: 0;
                visibility: hidden;
                pointer-events: none; /* CRITICAL: Prevent blocking when hidden */
                transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                overflow-x: hidden; /* prevent side scroll glitch */
            }

            .project-modal.active {
                opacity: 1;
                visibility: visible;
                pointer-events: auto; /* Enable interactions when active */
            }

            .project-modal-backdrop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--overlay-dark);
                backdrop-filter: var(--blur-strong);
                -webkit-backdrop-filter: var(--blur-strong);
                cursor: pointer;
            }

            /* Modal Container - OPTIMIZED FOR ALL PLATFORMS with Enhanced Safe Area */
            .project-modal-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.95);
                width: 92%;
                height: 88vh;
                max-width: 1400px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                /* Enhanced Safe Area Implementation */
                padding: calc(20px + max(10px, var(--safe-area-inset-top))) max(16px, calc(var(--safe-area-inset-right) + 16px)) max(16px, calc(var(--safe-area-inset-bottom) + 16px)) max(16px, calc(var(--safe-area-inset-left) + 16px));
                transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                z-index: 10001;
                /* Prevent overflow */
                box-sizing: border-box;
                max-height: 88vh;
            }

            .project-modal.active .project-modal-container {
                transform: translate(-50%, -50%) scale(1);
            }

            /* Desktop: Gleiche Abstände oben und unten für perfekte Zentrierung */
            @media (min-width: 900px) {
                .project-modal-container {
                    padding: 5px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    width: 96%;
                    height: 97vh;
                    max-width: 1800px;
                }
                
                /* FIXED: Desktop - Gleiche Abstände oben und unten für perfekte Zentrierung */
                .project-modal-header {
                    padding: 5px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    margin-bottom: 5px;
                    align-items: center;
                    display: flex;
                    justify-content: space-between;
                }
                
                .project-modal-title {
                    line-height: 1;
                    display: flex;
                    align-items: center;
                }
                
                .project-modal-close {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    margin: 0;
                }
                
                .project-modal-close svg {
                    display: block;
                }
            }

            /* Modal Header - IMPROVED Safe Area Implementation */
            .project-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                z-index: 10001;
                position: relative;
                /* Desktop Default: Gleiche Abstände oben und unten */
                padding: 12px;
                margin-bottom: 12px;
                border-bottom: 1px solid var(--white-alpha-15);
                /* Prevent overflow */
                width: 100%;
                box-sizing: border-box;
                /* FIXED: Perfekte vertikale Zentrierung aller Header-Elemente */
                min-height: auto;
                gap: 12px; /* Konsistenter Abstand zwischen Titel und Button */
            }

            .project-modal-title {
                font-size: clamp(18px, 4vw, 36px);
                font-weight: 700;
                color: var(--text-primary);
                margin: 0;
                padding: 0;
                flex: 1;
                /* Prevent text overflow */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                min-width: 0;
                /* FIXED: Perfekte vertikale Zentrierung mit Button */
                display: flex;
                align-items: center;
                justify-content: flex-start;
                line-height: 1;
            }

            /* IMPROVED: Better mobile close button positioning with Safe Area */
            .project-modal-close {
                background: var(--white-alpha-05);
                border: 1px solid var(--white-alpha-10);
                border-radius: 14px;
                /* Responsive sizing for better touch targets */
                width: clamp(44px, 8vw, 56px);
                height: clamp(44px, 8vw, 56px);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--white-alpha-60);
                transition: all 0.3s ease;
                backdrop-filter: var(--blur-light);
                -webkit-backdrop-filter: var(--blur-light);
                position: relative;
                flex-shrink: 0;
                padding: 0;
                margin: 0;
                min-width: clamp(44px, 8vw, 56px);
                min-height: clamp(44px, 8vw, 56px);
            }

            /* SVG icon responsive sizing */
            .project-modal-close svg {
                width: clamp(18px, 4vw, 24px);
                height: clamp(18px, 4vw, 24px);
                transition: all 0.3s ease;
            }

/* Modal content as single scroll area with sticky header on mobile */
@media (max-width: 900px) {
  .project-modal-header {
    position: sticky;
    top: max(0px, var(--safe-area-inset-top));
    z-index: 2;
    background: linear-gradient(to bottom, var(--black-alpha-85), var(--black-alpha-10));
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    /* FIXED: Konsistente Abstände wie beim normalen Header */
    padding: 16px 20px;
    padding-top: max(16px, calc(var(--safe-area-inset-top) + 16px));
    padding-bottom: 16px;
    margin-bottom: 3%;
    border-bottom: 1px solid var(--white-alpha-10);
  }
  
  .project-modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - max(120px, calc(var(--safe-area-inset-top) + 100px)) - max(40px, calc(var(--safe-area-inset-bottom) + 20px)));
    overscroll-behavior: contain;
  }
  
  .project-modal-media,
  .project-modal-info {
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Enhanced container for mobile */
  .project-modal-container {
    width: calc(100% - max(24px, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 24px)));
    height: calc(100vh - max(40px, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 40px)));
    max-width: 100%;
    max-height: 100vh;
  }
}

/* Ensure gallery never overflows viewport width */
.project-modal-gallery,
.project-modal-media,
.project-modal-info {
  max-width: 100%;
}

/* Prevent right-edge bleed on mobile */
@media (max-width: 900px) {
  .project-modal,
  .project-modal-container,
  .project-modal-content,
  .project-modal-gallery {
    margin-left: 0;
    margin-right: -10px; /* Pushes button 10px beyond normal right edge */
    padding-left: max(8px, var(--safe-area-inset-left));
    padding-right: max(8px, var(--safe-area-inset-right));
  }
  .gallery-item {
    width: 100%;
    max-width: calc(100% - max(16px, var(--safe-area-inset-left) + var(--safe-area-inset-right)));
  }
}

/* Prevent horizontal jiggle/overflow for modal and container */
.project-modal,
.project-modal-container,
.project-modal-content,
.project-modal-gallery {
  box-sizing: border-box;
}
.project-modal,
.project-modal-container {
  overflow-x: hidden;
}
/* Clamp the modal viewport height and account for safe-area */
@media (max-width: 900px) {
  .project-modal-container {
    height: auto;
    max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
  }
}

/* Apply safe-area paddings on mobile to header and modal container */
@media (max-width: 900px) {
  .project-modal-container {
    padding-top: calc(20px + var(--safe-area-inset-top));
    padding-left: max(12px, var(--safe-area-inset-left));
    padding-right: max(12px, var(--safe-area-inset-right));
    padding-bottom: max(12px, var(--safe-area-inset-bottom));
    max-width: 100%;
  }
}

/* Scroll behavior tuning to reduce side jiggle */
.project-modal-gallery {
  scroll-snap-type: y proximity;
  overscroll-behavior: contain;
  padding-bottom: max(12px, var(--safe-area-inset-bottom));
}
.gallery-item {
  scroll-snap-align: start;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: Larger description text and better line-height for readability */
@media (max-width: 768px) {
  .project-modal-description {
    font-size: 17px !important; /* moderat größer */
    line-height: 1.6 !important;
  }
}

            .project-modal-close:hover {
                background: var(--error-alpha-15);
                border-color: var(--error-alpha-40);
                color: var(--brand-error);
                transform: scale(1.05);
            }

            /* Touch devices optimization - Enhanced */
            @media (hover: none) and (pointer: coarse) {
                .project-modal-close {
                    width: clamp(48px, 10vw, 60px);
                    height: clamp(48px, 10vw, 60px);
                    min-width: clamp(48px, 10vw, 60px);
                    min-height: clamp(48px, 10vw, 60px);
                    /* Better touch feedback */
                    -webkit-tap-highlight-color: transparent;
                }
                
                .project-modal-close:active {
                    background: var(--error-alpha-30);
                    transform: scale(0.95);
                }
                
                .project-modal-close svg {
                    width: clamp(20px, 5vw, 28px);
                    height: clamp(20px, 5vw, 28px);
                }
                
                /* Enhanced title sizing for touch devices */
                .project-modal-title {
                    font-size: clamp(16px, 5vw, 32px);
                    line-height: 1.2;
                }
            }

            /* Modal Content - LARGER HEIGHT */
            .project-modal-content {
                flex: 1;
                background: var(--surface-modal);
                border-radius: 24px;
                border: 1px solid var(--white-alpha-10);
                backdrop-filter: var(--blur-strong);
                -webkit-backdrop-filter: var(--blur-strong);
                overflow: hidden;
                box-shadow: 0 20px 40px var(--overlay-medium);
                max-height: 90vh;  /* Added maximum height */
            }

            .project-modal-main {
                display: grid;
                height: 100%;
                min-height: 80vh;
                /* CSS Grid transitions for smooth responsive behavior */
                transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                            gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Media Section - SCROLLABLE GALLERY */
            .project-modal-media {
                padding: 2%;
                scroll-padding-top: 0;
                scroll-behavior: smooth;
                border-right: 1px solid var(--white-alpha-10);
                display: flex;
                flex-direction: column;
                gap: 2%;
                overflow: hidden auto;
                max-height: 100%;
                /* Smooth transitions for padding changes */
                transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Info Section with smooth transitions */
            .project-modal-info {
                padding: 2% 10px 2% 2%;
                padding-right: 10px;
                display: flex;
                flex-direction: column;
                gap: 2%;
                overflow: hidden auto;
                /* Responsive font size - adapts to window size */
                font-size: clamp(14px, 2.5vw, 20px);
                line-height: 1.6;
                /* Smooth transitions for all responsive changes */
                transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                            font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                            min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* NEUE SCROLLBARE GALERIE - ArtStation Style */
            .project-modal-gallery {
                display: flex;
                flex-direction: column;
                gap: 10px;

/* Force single scroll on mobile: disable inner scrolls */
@media (max-width: 768px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .project-modal-media,
  .project-modal-info {
    overflow: visible !important;
    max-height: none !important;
  }
}

                width: 100%;
            }

            .gallery-item {
                position: relative;
                width: 100%;
                border-radius: var(--card-radius); /* Unified radius */
                overflow: hidden;
                background: var(--surface-2);
                aspect-ratio: 16/9; /* Konsistente 16:9 Ratio */
                cursor: pointer;
                transition: all 0.3s ease;
                max-width: 100%;
                box-sizing: border-box;
                margin: 0;
                margin-bottom: 10px;
            }

            .gallery-item:hover {
                transform: scale(1.02);
                /* box-shadow entfernt - kein Glow mehr */
            }

            .gallery-item:last-child {
                margin-bottom: 0;
            }

            .gallery-item img,
            .gallery-item video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* Video Play Overlay für Videos */
            .gallery-item-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--black-alpha-40);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .gallery-item:hover .gallery-item-overlay {
                opacity: 1;
            }

            .gallery-play-button {
                background: var(--green-alpha-90);
                border-radius: 8px;
                /* Responsive dimensions - 50% smaller */
                width: clamp(20px, 4vw, 30px);
                height: clamp(20px, 4vw, 30px);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--surface-0);
                /* Responsive font size - 50% smaller */
                font-size: clamp(8px, 1.5vw, 12px);
            }

            /* Info Section - This was already defined above with transitions */

            .project-modal-info::-webkit-scrollbar {
                width: 6px;
            }

            .project-modal-info::-webkit-scrollbar-track {
                background: var(--white-alpha-10);
                border-radius: 3px;
            }

            .project-modal-info::-webkit-scrollbar-thumb {
                background: var(--brand-primary);
                border-radius: 3px;
            }

            .project-modal-category {
                color: var(--brand-primary);
                font-size: 14px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .project-modal-description {
                color: var(--text-primary);
                font-size: 16px;
                line-height: 1.6;
                opacity: 0.9;
                margin-top: 15px;
                margin-bottom: 15px;
                /* Smooth transitions for responsive font changes */
                transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                            line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Project Details */
            .project-modal-details {
                display: flex;
                flex-direction: column;
                gap: 16px;
                padding: 20px;
                background: var(--white-alpha-05);
                border-radius: 16px;
                border: 1px solid var(--white-alpha-10);
            }

            .project-detail-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0;
                border-bottom: 1px solid var(--white-alpha-10);
            }

            .project-detail-label {
                color: var(--white-alpha-70);
                font-size: 14px;
                font-weight: 500;
            }

            .project-detail-value {
                color: var(--text-primary);
                font-size: 14px;
                font-weight: 600;
                text-align: right;
            }

            /* Project Tags */
            .project-modal-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .project-tag {
                background: var(--green-alpha-20);
                color: var(--brand-primary);
                border: 1px solid var(--green-alpha-30);
                padding: 6px 12px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.3px;
            }

            /* =========================== */
            /* SMOOTH RESPONSIVE MODAL DESIGN - FIXED FÜR SOFORTIGES RENDERING */
            /* =========================== */

            /* Base modal layout with CSS Grid - DEFAULT IST DESKTOP LAYOUT */
            .project-modal-main {
                display: grid;
                height: 100%;
                min-height: 80vh;
                /* DEFAULT: Desktop Layout (60% Galerie, 40% Info) - SOFORT GELADEN */
                grid-template-columns: 60% 40%;
                gap: 0;
                /* Wichtig: will-change für besseres Rendering */
                will-change: grid-template-columns;
                /* Smooth transition für graduelle Breiten-Änderungen */
                transition: grid-template-columns 0.3s ease-in-out;
            }

            /* DESKTOP & TABLET (ab 56.31rem / 901px) - Info-Breite 40% mit smooth transition */
            @media (min-width: 56.31rem) {
                .project-modal-main {
                    grid-template-columns: 60% 40%;
                    gap: 0;
                }
                
                .project-modal-media {
                    padding: clamp(2%, 2.5vw, 3%);
                    overflow-y: auto;
                    overflow-x: hidden;
                    border-right: 1px solid var(--white-alpha-10);
                    scroll-padding-top: 0;
                    scroll-behavior: smooth;
                }
                
                .project-modal-info {
                    padding: clamp(2%, 2.5vw, 3%) 10px clamp(2%, 2.5vw, 3%) clamp(2%, 2.5vw, 3%);
                    width: 100%;
                    min-width: 30%;
                    overflow-y: auto !important;
                    overflow-x: hidden;
                    max-height: 100%;
                    font-size: clamp(14px, 2.5vw, 20px);
                    line-height: 1.6;
                }
            }
            
            /* Gradueller Übergang in kleinen Schritten für smooth Effekt */
            @media (min-width: 65.625rem) {
                .project-modal-main {
                    grid-template-columns: 62% 38%;
                }
            }
            
            @media (min-width: 71.875rem) {
                .project-modal-main {
                    grid-template-columns: 64% 36%;
                }
            }
            
            @media (min-width: 78.125rem) {
                .project-modal-main {
                    grid-template-columns: 66% 34%;
                }
            }
            
            @media (min-width: 84.375rem) {
                .project-modal-main {
                    grid-template-columns: 68% 32%;
                }
            }
            
            @media (min-width: 90.625rem) {
                .project-modal-main {
                    grid-template-columns: 71% 29%;
                }
            }
            
            @media (min-width: 96.875rem) {
                .project-modal-main {
                    grid-template-columns: 73% 27%;
                }
            }
            
            @media (min-width: 100rem) {
                .project-modal-main {
                    grid-template-columns: 75% 25%;
                }
            }

            /* MOBILE (bis 900px) - Einspaltig with Enhanced Safe Area */
            @media (max-width: 900px) {
                .project-modal-container {
                    width: calc(100% - max(3%, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 3%)));
                    height: calc(100vh - max(5vh, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 5vh)));
                    padding: max(2%, calc(var(--safe-area-inset-top) + 2%)) max(2%, calc(var(--safe-area-inset-right) + 2%)) max(2%, calc(var(--safe-area-inset-bottom) + 2%)) max(2%, calc(var(--safe-area-inset-left) + 2%));
                    transform: translate(-50%, -50%) scale(0.95);
                    max-width: 100%;
                    max-height: 100vh;
                    box-sizing: border-box;
                }

                .project-modal.active .project-modal-container {
                    transform: translate(-50%, -50%) scale(1);
                }

                .project-modal-header {
                    /* Enhanced mobile header spacing */
                    padding: 2% 3%;
                    padding-top: max(2%, calc(var(--safe-area-inset-top) + 2%));
                    padding-bottom: 2%;
                    margin-bottom: 3%;
                    border-bottom: 1px solid var(--white-alpha-15);
                }

                .project-modal-main {
                    grid-template-columns: 100%;
                    grid-template-rows: 1.2fr auto;
                    min-height: auto;
                    gap: 2%;
                }

                .project-modal-media {
                    border-right: none;
                    border-bottom: 1px solid var(--white-alpha-10);
                    padding: 2%;
                    max-height: 55vh;
                    overflow-y: auto;
                }
                /* Bilder weiter auseinander beim 900px Breakpoint */
                .project-modal-gallery {
                    gap: 10px !important;
                }

                .project-modal-info {
                    padding: 2% 10px 2% 2%;
                    max-height: 35vh;
                    overflow-y: auto;
                    /* Responsive font size - adapts to window size */
                    font-size: clamp(14px, 2.5vw, 20px);
                    line-height: 1.6;
                }

                .project-modal-title {
                    /* Titel auch etwas größer */
                    font-size: clamp(1.3rem, 5vw, 1.75rem);
                    line-height: 1.3;
                }

                .project-modal-description {
                    /* Beschreibung größer beim 900px Breakpoint */
                    font-size: clamp(1rem, 2.8vw, 1.15rem);
                    line-height: 1.5;
                }

                .gallery-item {
                    aspect-ratio: 16/9;
                    border-radius: clamp(0.75rem, 2vw, 1rem);
                }

                .project-modal-close {
                    width: clamp(2.875rem, 9vw, 3.5rem);
                    height: clamp(2.875rem, 9vw, 3.5rem);
                    min-width: clamp(2.875rem, 9vw, 3.5rem);
                    min-height: clamp(2.875rem, 9vw, 3.5rem);
                }

                .project-detail-item {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 0.5%;
                    padding: 1% 0;
                }

                .project-detail-value {
                    text-align: left;
                }

                .project-modal-like-btn {
                    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.5rem);
                    min-height: clamp(3.4rem, 8vw, 4rem);
                }

                .like-btn {
                    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.875rem, 2vw, 1rem);
                    font-size: clamp(0.8rem, 2vw, 1rem);
                }

                .like-icon {
                    width: clamp(1.125rem, 3vw, 1.5rem);
                    height: clamp(1.125rem, 3vw, 1.5rem);
                }
            }

            /* Medium Mobile (bis 768px) - Schrift bleibt groß */
            @media (max-width: 768px) {
                .project-modal-info {
                    /* Responsive font size - adapts to window size */
                    font-size: clamp(15px, 2.8vw, 20px) !important;
                    line-height: 1.6 !important;
                }

                .project-modal-title {
                    /* Titel größer */
                    font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important;
                }

                .project-modal-description {
                    /* Beschreibung größer */
                    font-size: clamp(1.05rem, 3vw, 1.2rem) !important;
                    line-height: 1.5 !important;
                }
            }

            /* Extra Small Mobile - OPTIMIZED with Full Safe Area Support */
            @media (max-width: 480px) {
                .project-modal-container {
                    width: calc(100% - max(16px, calc(var(--safe-area-inset-left) + var(--safe-area-inset-right) + 16px)));
                    height: calc(100vh - max(32px, calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + 32px)));
                    padding: max(12px, calc(var(--safe-area-inset-top) + 12px)) max(8px, calc(var(--safe-area-inset-right) + 8px)) max(8px, calc(var(--safe-area-inset-bottom) + 8px)) max(8px, calc(var(--safe-area-inset-left) + 8px));
                    border-radius: 16px;
                    transform: translate(-50%, -50%) scale(0.95);
                    max-width: 100%;
                    max-height: 100vh;
                    box-sizing: border-box;
                }
                
                /* Schrift auch bei sehr kleinen Bildschirmen größer */
                .project-modal-info {
                    /* Responsive font size - adapts to window size */
                    font-size: clamp(14px, 3vw, 18px) !important;
                    line-height: 1.6 !important;
                }

                .project-modal-title {
                    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
                }

                .project-modal-description {
                    font-size: clamp(1rem, 3.2vw, 1.15rem) !important;
                }

                .project-modal-header {
                    margin-bottom: 16px;
                    padding-bottom: 5px;
                }

                .project-modal-info {
                    padding: 16px 10px 16px 16px;
                    max-height: 40vh;
                    overflow-y: auto;
                }

                .project-modal-title {
                    font-size: clamp(16px, 6vw, 22px);
                    line-height: 1.2;
                }

                .project-modal-close {
                    width: clamp(44px, 10vw, 52px);
                    height: clamp(44px, 10vw, 52px);
                    min-width: clamp(44px, 10vw, 52px);
                    min-height: clamp(44px, 10vw, 52px);
                }

                .project-modal-close svg {
                    width: clamp(18px, 5vw, 22px);
                    height: clamp(18px, 5vw, 22px);
                }

                .project-detail-item {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 4px;
                }

                .project-detail-value {
                    text-align: left;
                }

                /* Enhanced mobile like button adjustments */
                .project-modal-like-btn {
                    padding: 10px 16px;
                    min-height: 60px;
                    align-items: center;
                }
                
                .project-modal-like-text {
                    line-height: 1.4;
                    min-height: auto;
                }
                
                /* Enhanced mobile language button adjustments */
                .project-modal-lang-btn {
                    padding: 8px 16px;
                    font-size: 12px;
                    min-width: 45px;
                }
                
                .project-modal-language-section {
                    padding: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                }

                .like-btn {
                    padding: 6px 12px;
                    font-size: 12px;
                }

                .like-icon {
                    width: 16px;
                    height: 16px;
                }
            }

            /* Extra Small Mobile - OPTIMIZED */
            @media (max-width: 480px) {
                .project-modal-container {
                    width: 100%;
                    height: 100vh;
                    padding: 10px;
                    border-radius: 0;
                    transform: translate(-50%, -50%) scale(0.95);
                }

                .project-modal.active .project-modal-container {
                    transform: translate(-50%, -50%) scale(1);
                }

                .project-modal-content {
                    border-radius: 16px;
                }

                .project-modal-media,
                .project-modal-info {
                    padding: 5px;
                }

                .gallery-item {
                    aspect-ratio: 16/9; /* Konsistente Ratio für alle Geräte */
                    border-radius: var(--card-radius); /* Unified radius */
                }

                .project-modal-info {
                    max-height: 35vh;
                }
            }


    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███               STUDENTWORK SECTION                   ███
       ███            VIDEO PORTFOLIO SHOWCASE                 ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */
    
    /* =========================== */
    /* ENHANCED STUDENT WORK SECTION - OPTIMIERT UND VEREINFACHT */
    /* =========================== */

    .student-work {
        padding: clamp(60px, 10vw, 100px) clamp(20px, 5vw, 50px);
        background: var(--surface-0);
        text-align: center;
        position: relative;
    }

    .student-title {
        font-size: clamp(36px, 8vw, 120px);
        font-weight: 800;
        text-align: center;
        margin-bottom: clamp(30px, 4vw, 40px);
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.02em;
    }

            /*
            //
            // =====================================================
            ███████████████████████████████████████████████
            ███                                         ███
            ███            VIDEO FUNCTIONS              ███
            ███         HAUPTVIDEO STEUERUNG            ███
            ███                                         ███
            ███████████████████████████████████████████████
            ===================================================== //
            //
            //
            */

            /* Enhanced Main Video Section - FLUID SIZING */
            /* Ändern Sie einfach den Prozentwert (z.B. 50%, 60%, 70%) um die Videogröße anzupassen */
            .main-video-section {
                width: 60%; /* HIER KÖNNEN SIE DIE GRÖßE ANPASSEN */
                max-width: none;
                margin: 0 auto clamp(30px, 4vw, 40px);
            }

            .video-title {
                font-size: clamp(24px, 4vw, 36px);
                font-weight: 800;
                margin-bottom: clamp(20px, 3vw, 30px);
                color: var(--text-primary);
                transition: color 0.3s ease;
            }

            .video-container {
                position: relative;
                background: var(--surface-2);
                border-radius: clamp(12px, 1.5vw, 16px);
                border: 1px solid var(--border-strong);
                overflow: hidden;
                aspect-ratio: 16/9;
                box-shadow: 0 10px 30px var(--overlay-medium);
                transition: box-shadow 0.3s ease;
                transform: none !important;
            }

            .video-container:hover {
                box-shadow: 0 15px 40px var(--green-alpha-20);
            }

            .video-embed {
                width: 100%;
                height: 100%;
                border: none;
                border-radius: clamp(12px, 1.5vw, 16px);
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }

            .main-video-preview {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                border-radius: clamp(12px, 1.5vw, 16px);
                display: block;
                position: absolute;
                top: 0;
                left: 0;
            }

            .main-video-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--black-alpha-30);
                border-radius: clamp(12px, 1.5vw, 16px);
                z-index: 1;
                transition: all 0.3s ease;
            }

            .video-container:hover .main-video-overlay {
                background: var(--black-alpha-40);
            }

            /* Enhanced Play Button - FLUID SIZING */
            .play-video-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: var(--green-alpha-95);
                color: var(--surface-0);
                border: none;
                padding: clamp(10px, 1.5vw, 16px) clamp(18px, 2.5vw, 35px);
                border-radius: clamp(20px, 3vw, 30px);
                font-size: clamp(13px, 1.2vw, 16px);
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 3;
                box-shadow: 0 8px 25px var(--green-alpha-40);
                display: flex;
                align-items: center;
                gap: clamp(6px, 1vw, 12px);
                backdrop-filter: var(--blur-light);
            }

            .play-video-btn:hover {
                background: var(--brand-primary);
                transform: translate(-50%, -50%) scale(1.05);
                box-shadow: 0 12px 35px var(--green-alpha-60);
            }

            .play-video-btn:active {
                transform: translate(-50%, -50%) scale(0.98);
            }

            .play-text {
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .play-icon {
                font-size: clamp(12px, 1.2vw, 18px);
            }

            /* Enhanced Video Controls - FLUID GRID */
            .video-controls {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;
                gap: clamp(15px, 2vw, 20px);
                margin: clamp(20px, 3vw, 30px) 0;
                padding: clamp(15px, 2vw, 20px);
                max-width: 800px;
                margin-left: auto;
                margin-right: auto;
            }

            .control-btn {
                background: var(--surface-2);
                color: var(--brand-primary);
                border: 2px solid var(--brand-primary);
                padding: clamp(12px, 1.5vw, 16px) clamp(20px, 3vw, 35px);
                border-radius: clamp(20px, 2.5vw, 30px);
                font-size: clamp(14px, 1.2vw, 16px);
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: clamp(8px, 1vw, 12px);
                min-width: auto;
                justify-content: center;
            }

            .control-btn:hover {
                background: var(--brand-primary);
                color: var(--surface-0);
                box-shadow: 0 8px 20px var(--green-alpha-30);
            }

            .control-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
            }

            .control-btn:disabled:hover {
                background: var(--surface-2);
                color: var(--brand-primary);
                box-shadow: none;
            }

            .arrow-icon {
                font-size: clamp(16px, 1.5vw, 18px);
                font-weight: bold;
            }

            .control-text {
                font-size: clamp(14px, 1.2vw, 16px);
            }

            .video-counter {
                background: var(--green-alpha-10);
                color: var(--brand-primary);
                padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 20px);
                border-radius: 25px;
                font-weight: 600;
                font-size: clamp(14px, 1.2vw, 16px);
                border: 1px solid var(--green-alpha-30);
                min-width: clamp(70px, 10vw, 80px);
                grid-column: 2;
                justify-self: center;
            }
            
            .control-btn.prev-btn {
                grid-column: 1;
                justify-self: end;
            }
            
            .control-btn.next-btn {
                grid-column: 3;
                justify-self: start;
            }

            /* Enhanced More Videos Button - FLUID SIZING */
            .more-videos-controls {
                margin: clamp(30px, 4vw, 40px) 0;
            }

            .more-videos-btn {
                background: var(--surface-2);
                color: var(--text-primary);
                border: 2px solid var(--brand-primary);
                padding: clamp(12px, 1.5vw, 16px) clamp(25px, 3vw, 35px);
                border-radius: clamp(20px, 2.5vw, 30px);
                font-size: clamp(14px, 1.2vw, 16px);
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                gap: clamp(8px, 1vw, 12px);
                box-shadow: 0 4px 15px var(--shadow-medium);
            }

            .more-videos-btn:hover {
                background: var(--brand-primary);
                color: var(--surface-0);
                box-shadow: 0 10px 30px var(--green-alpha-40);
            }


            /* Ensure layout size for icon container so it doesn't collapse */
            .more-videos-btn .gallery-icon { vertical-align: middle; flex: 0 0 18px; }


            /* Replace emoji with SVG icon via CSS mask so we can color it */
            .more-videos-btn .gallery-icon {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: var(--text-primary); /* default white */
                -webkit-mask: url('Icons/Movie.svg') center / contain no-repeat;
                mask: url('Icons/Movie.svg') center / contain no-repeat;
            }

            /* On hover, inherit hover state from button to switch color */
            .more-videos-btn:hover .gallery-icon {
                background-color: var(--brand-black); /* black on hover as requested */
            }

            .gallery-icon {
                font-size: 18px;
            }

            .arrow {
                transition: transform 0.3s ease;
                font-size: 14px;
                font-weight: bold;
            }

            .arrow.rotated {
                transform: rotate(180deg);
            }


            /* Fallback style if mask fails: image tag approach */
            .more-videos-btn .gallery-icon-img {
                width: 18px;
                height: 18px;
                display: inline-block;
                filter: brightness(0) invert(1); /* make white */
            }
            .more-videos-btn:hover .gallery-icon-img {
                filter: none; /* original black on hover */
            }

            /*
            //
            // =====================================================
            ███████████████████████████████████████████████
            ███                                         ███
            ███              VIDEO GALLERY              ███
            ███         THUMBNAIL GRID SYSTEM           ███
            ███                                         ███
            ███████████████████████████████████████████████
            ===================================================== //
            //
            //
            */

            /* Enhanced Video Gallery - FLUID SIZING */
            .video-gallery {
                margin-top: clamp(30px, 5vw, 50px);
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.5s ease;
                background: var(--surface-1);
                border-radius: clamp(16px, 2vw, 20px);
                padding: clamp(20px, 3vw, 30px);
                backdrop-filter: var(--blur-light);
                border: 1px solid var(--green-alpha-20);
            }

            .video-gallery.show {
                opacity: 1;
                transform: translateY(0);
                display: block !important;
            }

            .gallery-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: clamp(20px, 3vw, 30px);
                padding-bottom: clamp(15px, 2vw, 20px);
                border-bottom: 1px solid var(--green-alpha-30);
            }

            .gallery-title {
                font-size: clamp(18px, 2vw, 24px);
                font-weight: 600;
                color: var(--brand-primary);
                margin: 0;
                flex: 1;
                padding-right: 5px;
                max-width: calc(100% - 60px);
                display: flex;
                align-items: center;
                justify-content: flex-start;
                line-height: 1;
                height: clamp(32px, 4vw, 40px);
                padding-top: 1px;
            }

            .close-gallery-btn {
                background: var(--white-alpha-05);
                color: var(--white-alpha-60);
                border: none;
                width: clamp(32px, 4vw, 40px);
                height: clamp(32px, 4vw, 40px);
                border-radius: 8px;
                font-size: clamp(14px, 1.5vw, 18px);
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 12px;
                transform: none;
            }

            .close-gallery-btn:hover {
                background: var(--error-alpha-15);
                color: var(--brand-error);
                transform: scale(1.1);
            }

            /* Enhanced Video Grid - FLUID GRID */
            .video-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 280px), 1fr));
                gap: clamp(15px, 2.5vw, 25px);
                max-width: 1200px;
                margin: 0 auto;
            }

            .video-thumbnail {
                background: var(--surface-2);
                border-radius: clamp(12px, 1.5vw, 16px);
                overflow: hidden;
                cursor: pointer;
                transition: all 0.3s ease;
                border: 2px solid transparent;
                position: relative;
            }

            .video-thumbnail:hover {
                transform: translateY(-8px) scale(1.02);
                border-color: var(--brand-primary);
                box-shadow: 0 15px 30px var(--green-alpha-30);
            }

            .video-thumbnail.active {
                border-color: var(--brand-primary);
                box-shadow: 0 0 25px var(--loading-cube-shadow);
                background: var(--green-alpha-10);
            }

            .thumbnail-wrapper {
                position: relative;
                aspect-ratio: 16/9;
                overflow: hidden;
            }

            .video-thumb-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.3s ease;
            }

            .video-thumbnail:hover .video-thumb-image {
                transform: scale(1.05);
            }

            .video-thumb-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--black-alpha-70);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s ease;
            }

            .video-thumbnail:hover .video-thumb-overlay {
                opacity: 1;
            }

            .video-duration {
                position: absolute;
                bottom: clamp(6px, 1vw, 8px);
                right: clamp(6px, 1vw, 8px);
                background: var(--black-alpha-80);
                color: var(--text-primary);
                padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
                border-radius: 4px;
                font-size: clamp(10px, 1vw, 12px);
                font-weight: 600;
            }

            .thumbnail-info {
                padding: clamp(12px, 1.5vw, 15px);
                text-align: left;
            }

            .thumbnail-title {
                font-size: clamp(14px, 1.3vw, 16px);
                font-weight: 600;
                color: var(--text-primary);
                margin: 0 0 5px 0;
                line-height: 1.3;
            }

            .thumbnail-category {
                font-size: clamp(10px, 1vw, 12px);
                color: var(--brand-primary);
                margin: 0;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            /*
            //
            // =====================================================
            ███████████████████████████████████████████████
            ███                                         ███
            ███    STUDENT WORK RESPONSIVE BREAKPOINTS  ███
            ███         NUR 2 BREAKPOINTS: 900 & 480    ███
            ███                                         ███
            ███████████████████████████████████████████████
            ===================================================== //
            //
            //
            */

            /* BREAKPOINT 900PX - TABLETS */
            @media (max-width: 900px) {
                .main-video-section {
                    width: 90%;
                }

                .video-controls {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                }

                .video-counter {
                    order: -1;
                }

                .control-btn {
                    width: auto; /* Buttons passen sich dem Textinhalt an */
                    align-self: center;
                }

                .video-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;
                }
            }

            /* BREAKPOINT 480PX - MOBILE */
            @media (max-width: 480px) {
                .main-video-section {
                    width: 95%;
                }

                .student-title {
                    font-size: clamp(32px, 10vw, 48px);
                }

                .video-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 12px;
                }

                .control-btn {
                    width: auto; /* Buttons passen sich dem Textinhalt an */
                }

                .play-text {
                    display: none;
                }
            }

        /*
        //
        // =====================================================
        ███████████████████████████████████████████████
        ███                                         ███
        ███                SKILLS SECTION           ███
        ███            SOFTWARE Knowledge SHOWCASE  ███
        ███                                         ███
        ███████████████████████████████████████████████
        ===================================================== //
        //
        //
        */

        /* =========================== */
        /* IMPROVED DESKTOP SOFTWARE Knowledge SECTION - 7 BUTTONS PER ROW */
        /* =========================== */

/* Skills Section - Main Container */
        .skills-section {
            padding: 100px 50px;
            background: var(--surface-0);
            text-align: center;
        }

        .skills-title {
            font-size: 48px;
            font-weight: 600;
            margin-bottom: 60px;
        }

        /* IMPROVED DESKTOP SKILLS GRID - 6 BUTTONS PER ROW, LARGER SIZE */
        .skills-grid {
            max-width: 1400px; /* Adjusted max width for 6 columns */
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(6, 1fr); /* Changed to 6 columns */
            gap: 25px; /* Larger gap between buttons */
            justify-content: center;
            padding: 0 20px;
        }

        .skill-btn {
            background: var(--surface-1);
            border: 2px solid var(--border-strong);
            border-radius: var(--card-radius); /* Unified radius */
            padding: 25px 20px; /* Larger padding for 6 columns */
            font-size: 16px; /* Larger font size */
            font-weight: 600;
            color: var(--text-primary);
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 110px; /* Larger height */
            width: 100%;
            word-wrap: break-word;
            hyphens: auto;
            position: relative;
            overflow: hidden;
            line-height: 1.3; /* Better line height for readability */
        }

        .skill-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, var(--green-alpha-20), transparent);
            transition: left 0.5s ease;
        }

        .skill-btn:hover::before {
            left: 100%;
        }

        .skill-btn:hover {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            transform: translateY(-5px);
            color: var(--surface-0);
            box-shadow: 0 15px 35px var(--green-alpha-40); /* Enhanced shadow */
        }

            /*
            //
            // =====================================================
               ███████████████████████████████████████████████████████
               ███                                                 ███
               ███                 FOOTER SECTION                  ███
               ███                SITE NAVIGATION                  ███
               ███                                                 ███
               ███████████████████████████████████████████████████████
               ===================================================== //
            //
            //
            */

/* Footer */
        .footer {
            padding: 40px 50px;
            padding-left: max(50px, env(safe-area-inset-left));
            padding-right: max(50px, env(safe-area-inset-right));
            padding-bottom: max(40px, env(safe-area-inset-bottom));
            background: var(--surface-1);
            border-top: 1px solid var(--white-alpha-10);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer p {
            font-size: 14px;
            opacity: 0.7;
        }

        .footer-links {
            display: flex;
            gap: 30px;
        }

        .footer-links a {
            color: var(--text-primary);
            text-decoration: none;
            font-size: 14px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .footer-links a:hover {
            opacity: 1;
            color: var(--brand-primary);
        }

/*
//
// =================================================================
   ████████████████████████████████████████████████████████████████
   ███                                                          ███
   ███                     ABOUT ME PAGE                        ███
   ███                   SEITEN BEREICHE                        ███
   ███                                                          ███
   ████████████████████████████████████████████████████████████████
   ================================================================= //
//
//
*/

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███               ABOUT PAGE CONTENT                    ███
       ███            PERSÖNLICHE INFORMATIONEN                ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

    /* Page-specific styles */
.about-main,
.contact-main,
.legal-main {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
}

.about-hero,
.contact-hero,
.legal-hero {
    padding: 80px clamp(20px, 5vw, 50px); /* Responsive padding */
    padding-left: max(clamp(20px, 5vw, 50px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 5vw, 50px), env(safe-area-inset-right));
    background: var(--surface-0);
}

.about-container,
.contact-container,
.legal-container {
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 700;
    margin-bottom: 60px;
    color: var(--text-primary);
}

/* About page specific */
.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-text {
    color: var(--text-primary);
}

.intro-text {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.6;
}

.about-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Profile image section */
.about-image-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-placeholder {
    height: 300px;
    border-radius: var(--card-radius); /* Unified radius */
    font-size: 18px;
    aspect-ratio: 2400/1400;
}


/*
    //
    //
    // =====================================================
    ███████████████████████████████████████████████
    ███                                         ███
    ███                Contact                  ███
    ███                  Page                   ███
    ███                                         ███
    ███████████████████████████████████████████████
    ===================================================== //
    //
    //
    */

/* ===================================================
   CONTACT PAGE LAYOUT FIX - 2025
   Problem: Boxen übereinander bei 1000px-1200px
   Lösung: Minmax Grid + responsive Margins
   =================================================== */

/* CONTACT PAGE - FORM WITH ADDED SPACING */
.contact-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Links größer (55%), rechts kleiner (45%) - rechte Box nicht zu breit */
    gap: clamp(30px, 5vw, 60px); /* Responsive gap */
    align-items: start;
    position: relative;
}

.contact-info {
    color: var(--text-primary);
}

.contact-info h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

.contact-subtitle {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 3%;
}

/* ADDED SPACING STYLES */
.contact-spacing {
    font-size: 16px;
    margin-bottom: 3%;
    height: 20px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    font-size: 16px;
    line-height: 1.6;
}

.contact-item strong {
    color: var(--brand-primary);
    font-weight: 600;
}
/* =========================
   AVAILABILITY STATUS INDICATOR
   ========================= */

.contact-status {
    margin-top: 0; /* Von 10px auf 0 geändert für einheitliche Abstände */
    margin-bottom: 0; /* Kein extra Abstand nach unten */
    padding: 0; /* Von 12px 0 auf 0 geändert */
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--white-alpha-03);
    backdrop-filter: blur(10px);
    border: 1px solid var(--white-alpha-08);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.status-indicator:hover {
    background: var(--white-alpha-05);
    border-color: var(--white-alpha-15);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--black-alpha-15);
}

/* Status Light - LED Style */
.status-light {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    background: var(--text-tertiary);
    box-shadow: 0 0 10px var(--tertiary-alpha-50);
    transition: all 0.4s ease;
}

/* Available Status - Green Pulsing Light */
.status-light.available {
    background: var(--brand-primary);
    box-shadow: 
        0 0 10px var(--green-alpha-60),
        0 0 20px var(--green-alpha-40),
        0 0 30px var(--green-alpha-20);
    animation: statusPulse 2s ease-in-out infinite;
}

/* Unavailable Status - Red Static Light */
.status-light.unavailable {
    background: var(--brand-error);
    box-shadow: 
        0 0 10px var(--error-alpha-50),
        0 0 15px var(--error-alpha-30);
}

/* Loading Status - Gray Blinking */
.status-light.loading {
    background: var(--text-tertiary);
    animation: statusBlink 1.5s ease-in-out infinite;
}

/* Status Text */
.status-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    transition: color 0.4s ease;
}

.status-indicator:has(.status-light.available) .status-text {
    color: var(--brand-primary);
}

.status-indicator:has(.status-light.unavailable) .status-text {
    color: var(--brand-error);
}

/* Pulse Animation for Available Status */
@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* Blink Animation for Loading Status */
@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .status-indicator {
        padding: 8px 14px;
    }
    
    .status-light {
        width: 10px;
        height: 10px;
    }
    
    .status-text {
        font-size: 14px;
    }
}
/* Resume Download Button */
.resume-download-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--white-alpha-10);
}

/* Resume Download Button - Standalone Version (außerhalb der Box) */
.resume-download-section-standalone {
    max-width: 1200px;
    margin: 30px auto 0 auto; /* Zentriert und Abstand nach oben */
    padding: 0 50px; /* Gleiche Padding wie .contact-container */
}

@media (max-width: 768px) {
    .resume-download-section-standalone {
        padding: 0 20px; /* Gleiche mobile Padding wie .contact-container */
        margin-top: 20px;
    }
}
.resume-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-success-light));
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--green-alpha-30);
    border: 1px solid var(--white-alpha-10);
}

.resume-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--green-alpha-50);
    background: linear-gradient(135deg, var(--brand-success-light), var(--brand-primary));
}

.resume-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px var(--green-alpha-40);
}

.resume-download-btn svg {
    transition: transform 0.3s ease;
}

.resume-download-btn:hover svg {
    transform: translateY(2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .resume-download-section {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .resume-download-btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 15px;
    }
}
/* Enhanced Download Button Styles */
.resume-download-btn-enhanced {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 28px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-success-light));
    color: var(--brand-black)0;
    text-decoration: none;
    border-radius: 16px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px var(--green-alpha-15),
        0 1px 4px var(--black-alpha-10),
        inset 0 1px 0 var(--white-alpha-20);
    border: 1px solid var(--white-alpha-15);
    overflow: hidden;
    cursor: pointer;
}

.resume-download-btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent);
    transition: left 0.5s ease;
}

.resume-download-btn-enhanced:hover::before {
    left: 100%;
}

.resume-download-btn-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 4px 15px var(--green-alpha-25),
        0 2px 8px var(--black-alpha-12),
        inset 0 1px 0 var(--white-alpha-30);
    background: linear-gradient(135deg, var(--brand-success-light), var(--brand-primary));
}

.resume-download-btn-enhanced:active {
    transform: translateY(-1px);
    box-shadow: 
        0 2px 8px var(--green-alpha-20),
        0 1px 4px var(--black-alpha-10);
}

/* Download Icon Wrapper */
.download-icon-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-alpha-30);
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.resume-download-btn-enhanced:hover .download-icon-wrapper {
    background: var(--white-alpha-40);
    transform: scale(1.1);
}

/* Download Icons */
.download-icon,
.download-check {
    width: 24px;
    height: 24px;
    color: var(--brand-black);
    transition: all 0.3s ease;
}

.download-arrow {
    transition: all 0.3s ease;
}

.resume-download-btn-enhanced:hover .download-arrow {
    animation: bounce-down 1.2s ease infinite;
}

@keyframes bounce-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
}

.download-tray {
    transition: all 0.3s ease;
}

/* Download Content */
.download-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    text-align: left;
}

.download-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-black);
    line-height: 1.2;
}

.download-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--black-alpha-75);
    line-height: 1.2;
}

/* File Type Badge */
.file-type-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--white-alpha-30);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-black);
    border: 1px solid var(--white-alpha-40);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.resume-download-btn-enhanced:hover .file-type-badge {
    background: var(--white-alpha-40);
    border-color: var(--white-alpha-50);
}

.file-type-badge svg {
    width: 14px;
    height: 14px;
}

/* Download Progress */
.download-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--white-alpha-20);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.download-progress-fill {
    height: 100%;
    background: var(--white-alpha-90);
    border-radius: 0 0 16px 16px;
    transition: width 0.3s ease;
    width: 0%;
}

/* Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
    .resume-download-btn-enhanced {
        width: 100%;
        padding: 16px 20px;
        gap: 12px;
    }
    
    .download-icon-wrapper {
        width: 28px;
        height: 28px;
    }
    
    .download-icon,
    .download-check {
        width: 20px;
        height: 20px;
    }
    
    .download-title {
        font-size: 15px;
    }
    
    .download-subtitle {
        font-size: 12px;
    }
    
    .file-type-badge {
        padding: 5px 10px;
        font-size: 11px;
    }
}

.contact-form-section {
    position: relative;
    margin-top: clamp(-194px, -15vw, -100px); /* Responsive negative margin */
    align-self: start;
}

.contact-form {
    background: var(--surface-1);
    padding: 40px;
    border-radius: var(--card-radius); /* Unified radius */
    border: 1px solid var(--white-alpha-10);
    transition: all 0.3s ease;
}

/* MESSAGE AREA POSITIONED */
#messageArea {
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    z-index: 10;
}

/* When message is shown, push form down */
.contact-form.with-message {
    margin-top: 274px;
    transition: margin-top 0.6s ease;
}

/* ENHANCED SUCCESS/ERROR MESSAGE BOX STYLING */
.form-message {
    padding: 20px 25px;
    border-radius: var(--card-radius); /* Unified radius */
    margin-bottom: 3%;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    backdrop-filter: var(--blur-light);
    border: 2px solid;
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.form-message.success {
    background: linear-gradient(135deg, var(--green-alpha-15), var(--green-secondary-10));
    color: var(--brand-primary);
    border-color: var(--green-alpha-50);
    box-shadow: 
        0 8px 25px var(--green-alpha-20),
        0 0 30px var(--green-alpha-10),
        inset 0 1px 0 var(--green-alpha-20);
}

.form-message.error {
    background: linear-gradient(135deg, var(--error-alpha-15), var(--error-darker-10));
    color: var(--brand-error);
    border-color: var(--error-alpha-40);
    box-shadow: 
        0 8px 25px var(--error-alpha-20),
        0 0 30px var(--error-alpha-10),
        inset 0 1px 0 var(--error-alpha-20);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.form-group label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 14px;
}

.form-group input,
.form-group textarea {
    background: var(--surface-2);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 12px 15px;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: var(--border-strong);
    box-shadow: 0 0 10px var(--green-alpha-30);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: var(--brand-primary);
    color: var(--surface-0);
    border: none;
    padding: 15px 40px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent);
    transition: left 0.5s ease;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    background: var(--brand-primary-hover);

    box-shadow: 0 8px 25px var(--green-alpha-30);
}

.submit-btn:active {
    transform: translateY(0);
}



/*
    //
    //
    // =====================================================
    ███████████████████████████████████████████████
    ███                                         ███
    ███             Data Protection             ███
    ███                  Page                   ███
    ███                                         ███
    ███████████████████████████████████████████████
    ===================================================== //
    //
    //
    */



/* =========================== */
/* LAZY LOADING STYLES */
/* =========================== */

/* Lazy loading image styles */
.lazy-load {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Lazy image container with skeleton loading */
.lazy-image-container {
    position: relative;
    overflow: hidden;
}

/* Skeleton loading animation */
.lazy-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--skeleton-highlight) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: inherit;
    z-index: 1;
}

.lazy-image-container.loaded .lazy-skeleton {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Improved hero image lazy loading */
.hero-image.lazy-load {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-image.lazy-load.loaded {
    opacity: 1;
}

/* Video thumbnail lazy loading */
.video-thumb-image.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.video-thumb-image.lazy-load.loaded {
    opacity: 1;
}

/* Main video preview lazy loading */
.main-video-preview.lazy-load {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.main-video-preview.lazy-load.loaded {
    opacity: 1;
}

/* Project placeholder lazy loading */
.project-placeholder.lazy-image-container {
    background: var(--gradient-secondary);
    border: 1px solid var(--border-light);
    position: relative;
}

.project-placeholder.lazy-image-container.loaded {
    background: none;
    border: none;
}

/* About page image lazy loading */
.about-placeholder.lazy-image-container {
    background: var(--gradient-secondary);
    border: 1px solid var(--border-light);
    position: relative;
}

.about-placeholder.lazy-image-container.loaded {
    background: none;
    border: none;
}

/* University and customer logo lazy loading */
.university-logo.lazy-load,
.customer-placeholder.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.university-logo.lazy-load.loaded,
.customer-placeholder.lazy-load.loaded {
    opacity: 1;
}

/* Lazy loading blur effect for smooth transitions */
.lazy-load:not(.loaded) {
    filter: blur(5px);
    transform: scale(1.02);
}

.lazy-load.loaded {
    filter: blur(0);
    transform: scale(1);
}



/* =========================== */
/* ENHANCED LIKE SYSTEM STYLES */
/* =========================== */

/* Project Card Like Section */
.project-like-section {
    margin-top: auto; /* Drückt die Like-Sektion an das untere Ende der Karte */
    padding-top: 15px;
    border-top: 1px solid var(--white-alpha-10);
    display: flex;
    justify-content: center;
}

.like-btn {
    background: transparent;
    border: 1px solid var(--white-alpha-30);
    border-radius: 25px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--white-alpha-70);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.like-btn:hover {
    border-color: var(--white-alpha-60);
    background: var(--white-alpha-10);
    color: var(--brand-white);

    box-shadow: 0 8px 25px var(--white-alpha-20);
}

.like-btn.liked {
    border-color: var(--brand-error);
    background: var(--error-alpha-15);
    color: var(--brand-error);
    box-shadow: 0 8px 25px var(--error-alpha-30);
}

.like-btn.liked .like-icon {
    fill: var(--brand-error) !important;
    stroke: var(--brand-error) !important;
    animation: heartBeat 0.8s ease-out;
}

/* Wasser-Farbe - muss mit border-color übereinstimmen */
/* Liked State: Rot */
.like-btn.liked .wave,
.project-modal-like-btn.liked .wave {
    fill: var(--brand-error) !important;
}

.like-btn.liked .water-base,
.project-modal-like-btn.liked .water-base {
    fill: var(--brand-error) !important;
}

/* Not Liked State: Weiß (wie die Outline) */
.like-btn:not(.liked) .wave,
.project-modal-like-btn:not(.liked) .wave {
    fill: white !important;
}

.like-btn:not(.liked) .water-base,
.project-modal-like-btn:not(.liked) .water-base {
    fill: white !important;
}

.like-icon {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    display: block;
    overflow: visible;
}

/* ========================================
   WASSER-ANIMATION FÜR LIKE-BUTTON (iOS Premium Style)
   ======================================== */

/* Heart SVG Container */
.like-btn .heart-svg,
.project-modal-like-btn .heart-svg {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
    color: white; /* Default: Weiß (not liked) */
    transition: color 0.3s ease;
}

/* Liked State: Rot */
.like-btn.liked .heart-svg,
.project-modal-like-btn.liked .heart-svg {
    color: var(--brand-error);
}

/* Heart Outline - iOS Style */
.heart-outline {
    transition: stroke 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
                filter 0.4s ease 1.2s;
    filter: drop-shadow(0 0 0px var(--error-transparent));
}

.like-btn.liked .heart-outline,
.project-modal-like-btn.liked .heart-outline {
    stroke: var(--brand-error);
    filter: drop-shadow(0 0 8px var(--error-alpha-60));
}

/* Kein Glow beim Unlike */
.like-btn:not(.liked) .heart-outline,
.project-modal-like-btn:not(.liked) .heart-outline {
    filter: drop-shadow(0 0 0px var(--error-transparent));
    transition: stroke 0.4s ease,
                filter 0.3s ease 0s;
}

/* Wasser-Gruppe: Startet KOMPLETT UNTER dem sichtbaren Bereich */
.water-group {
    transform: translateY(30px);
    transition: transform 1.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Liked: Wasser steigt nach oben */
.like-btn.liked .water-group,
.project-modal-like-btn.liked .water-group {
    transform: translateY(-5px);
}

/* Unlike: Smooth ablaufen */
.like-btn:not(.liked) .water-group,
.project-modal-like-btn:not(.liked) .water-group {
    transform: translateY(30px);
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.6, 1);
}

/* Detaillierte Wellen - iOS Premium Feel */
.wave {
    transform-origin: center center;
    animation-play-state: paused;
    transition: opacity 0.3s ease;
}

/* Wellen starten beim Like */
.like-btn.liked .wave,
.project-modal-like-btn.liked .wave {
    animation-play-state: running;
}

/* Welle 1 - Hauptwelle: Große, langsame Bewegung */
.wave-1 {
    animation: wave1Motion 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes wave1Motion {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
    }
    25% {
        transform: translateX(-4px) translateY(-0.5px);
    }
    50% {
        transform: translateX(0px) translateY(-1px);
    }
    75% {
        transform: translateX(4px) translateY(-0.5px);
    }
}

/* Welle 2 - Mittlere Welle: Gegenbewegung für Tiefe */
.wave-2 {
    animation: wave2Motion 6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    animation-direction: reverse;
}

@keyframes wave2Motion {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scaleX(1);
    }
    33% {
        transform: translateX(-3px) translateY(-0.3px) scaleX(1.02);
    }
    66% {
        transform: translateX(3px) translateY(-0.3px) scaleX(1.02);
    }
}

/* Welle 3 - Feine Details: Schnellere, subtile Bewegung */
.wave-3 {
    animation: wave3Motion 4.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes wave3Motion {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
    }
    20% {
        transform: translateX(-2px) translateY(-0.2px);
    }
    40% {
        transform: translateX(1px) translateY(-0.4px);
    }
    60% {
        transform: translateX(2px) translateY(-0.2px);
    }
    80% {
        transform: translateX(-1px) translateY(-0.3px);
    }
}

/* Welle 4 - Highlight: Sehr subtil, gibt Glanz-Effekt */
.wave-4 {
    animation: wave4Motion 7s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes wave4Motion {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scaleX(1);
    }
    50% {
        transform: translateX(-1px) translateY(-0.5px) scaleX(1.01);
    }
}

/* Heart Beat - Premium iOS Animation */
.like-btn.liked .heart-svg,
.project-modal-like-btn.liked .heart-svg {
    animation: heartBeatPremium 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes heartBeatPremium {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Performance - iOS Optimierung */
.water-group,
.wave,
.heart-svg {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth Rendering */
.heart-svg {
    shape-rendering: geometricPrecision;
}

.wave {
    shape-rendering: geometricPrecision;
}

/* ======================================== 
   WASSER-ANIMATION - ENDE
   ======================================== */

.like-count {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Project Modal Language Section */
.project-modal-language-section {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: var(--white-alpha-05);
    border-radius: 16px;
    border: 1px solid var(--white-alpha-10);
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-modal-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--white-alpha-05);
    border: 1px solid var(--white-alpha-20);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
    text-transform: uppercase;
}

.project-modal-lang-btn:hover {
    background: var(--green-alpha-10);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 15px var(--green-alpha-20);
    transform: scale(1.05);
}

.project-modal-lang-btn:active {
    transform: scale(0.95);
}

/* Project Modal Like Section */
.project-modal-like-section {
    margin-top: 20px;
    padding: 20px;
    background: var(--white-alpha-05);
    border-radius: 16px;
    border: 1px solid var(--white-alpha-10);
}

.project-modal-like-btn {
    background: linear-gradient(135deg, var(--white-alpha-10), var(--white-alpha-10));
    border: 2px solid var(--white-alpha-30);
    border-radius: 50px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.project-modal-like-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-20), transparent);
    transition: left 0.5s ease;
}

.project-modal-like-btn:hover::before {
    left: 100%;
}

.project-modal-like-btn:hover {
    border-color: var(--text-primary);
    background: linear-gradient(135deg, var(--white-alpha-20), var(--white-alpha-20));
    color: var(--text-primary);
    box-shadow: 0 15px 35px var(--white-alpha-40);
}

.project-modal-like-btn.liked {
    border-color: var(--brand-error);
    background: linear-gradient(135deg, var(--error-alpha-20), var(--error-darker-20));
    color: var(--brand-error);
    box-shadow: 0 15px 35px var(--error-alpha-40);
}

.project-modal-like-btn.liked .like-icon {
    fill: var(--brand-error) !important;
    stroke: var(--brand-error) !important;
    animation: heartBeat 0.8s ease-out;
}

.project-modal-like-text {
    flex: 1;
    text-align: center;
    line-height: 1.4;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

.project-modal-like-count {
    background: var(--white-alpha-20);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.project-modal-like-btn.liked .project-modal-like-count {
    background: var(--error-alpha-20);
    color: var(--brand-error);
}

/* HERZ-ANIMATIONEN */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* Like button ripple effect */
.like-btn.clicked,
.project-modal-like-btn.clicked {
    animation: likeRipple 0.6s ease-out;
}

@keyframes likeRipple {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--green-alpha-70);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px var(--green-transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--green-transparent);
    }
}

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                LEGAL INFO PAGE                      ███
       ███              IMPRESSUM & RECHTLICHES                ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* Legal pages specific */
.legal-content {
    color: var(--text-primary);
}

.legal-section h2 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 3%;
    color: var(--brand-primary);
}

.legal-section h3 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.legal-section p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 3%;
    opacity: 0.9;
}

.last-updated {
    font-style: italic;
    color: var(--text-tertiary);
    margin-bottom: 30px !important;
}

.contact-info {
    background: var(--surface-1);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--white-alpha-10);
    margin-top: 20px;
}

.contact-info p {
    margin: 0;
    line-height: 1.6;
}

/* Form validation styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown),
.form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--white-alpha-60);
}

.form-group input:valid,
.form-group textarea:valid {
    border-color: var(--brand-primary);
}

/* =========================== */
/* CONSTRUCTION OVERLAY */
/* =========================== */

.construction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* backdrop-filter: blur(8px); */ /* Entfernt wie angefordert */
    animation: constructionFadeIn 1s ease-out;
}
/* =========================== */
/* PROJECT CARD OVERLAYS */
/* =========================== */

.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* backdrop-filter: blur(8px); */ /* Entfernt wie angefordert */
    animation: constructionFadeIn 1s ease-out;
    border-radius: var(--card-radius); /* Unified radius */
}

/* Larger barriers for project card overlays on desktop - keep original pattern */
.project-card-overlay .construction-barrier-top,
.project-card-overlay .construction-barrier-bottom {
    height: 25px; /* Increased from 15px for better visibility on desktop */
    /* Keep original background-size for proper stripes */
}

/* Hide the construction icon for project card overlays */
.project-card-overlay .construction-icon {
    display: none;
}

/* Perfect centering and larger spacing for desktop */
.project-card-overlay .construction-content {
    padding: 35px 30px; /* Increased padding for better spacing and centering on desktop */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
}

/* Make title much larger and perfectly centered on desktop */
.project-card-overlay .construction-title {
    font-size: 42px; /* Increased from 36px for maximum visibility on desktop */
    margin-bottom: 3%;
    letter-spacing: 2.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}


/* Make text much larger and perfectly centered on desktop */
.project-card-overlay .construction-text {
    font-size: 20px; /* Increased from 18px for maximum readability on desktop */
    line-height: 1.6;
    margin-bottom: 24px;
    opacity: 0.95;
    font-weight: 500;
    text-align: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* Make tools (icons) much larger and perfectly centered on desktop */
.project-card-overlay .construction-tools {
    gap: 18px; /* Increased gap for better spacing */
    margin-bottom: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-card-overlay .construction-tools .tool {
    font-size: 30px; /* Increased from 26px for maximum visibility on desktop */
    filter: drop-shadow(0 4px 8px var(--black-alpha-50));
    transition: transform 0.2s ease, filter 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-card-overlay .construction-tools .tool:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 6px 12px var(--black-alpha-60));
}

.construction-overlay.hidden {
    display: none;
}

@keyframes constructionFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.construction-barrier-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: repeating-linear-gradient(
        45deg,
        var(--brand-warning) 0px,
        var(--brand-warning) 20px,
        var(--surface-0) 20px,
        var(--surface-0) 40px
    );
    background-size: 56px 56px;
    animation: barrierSlideRight 1.5s infinite linear;
    box-shadow: 0 2px 10px var(--warning-yellow-alpha);
    will-change: background-position;
}

.construction-barrier-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: repeating-linear-gradient(
        -45deg,
        var(--brand-warning) 0px,
        var(--brand-warning) 20px,
        var(--surface-0) 20px,
        var(--surface-0) 40px
    );
    background-size: 56px 56px;
    animation: barrierSlideLeft 1.5s infinite linear;
    box-shadow: 0 -2px 10px var(--warning-yellow-alpha);
    will-change: background-position;
}

@keyframes barrierSlideRight {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 56px 0px;
    }
}

@keyframes barrierSlideLeft {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -56px 0px;
    }
}

.construction-content {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.construction-icon {
    font-size: 80px;
    margin-bottom: 30px;
    animation: constructionBounce 2s infinite;
}

@keyframes constructionBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.construction-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--brand-warning);
    margin-bottom: 3%;
    text-shadow: 3px 3px 6px var(--black-alpha-80);
    letter-spacing: 3px;
    animation: titleGlow 3s infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 3px 3px 6px var(--black-alpha-80), 0 0 20px var(--warning-yellow-30);
    }
    50% {
        text-shadow: 3px 3px 6px var(--black-alpha-80), 0 0 30px var(--warning-yellow-60);
    }
}

.construction-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.construction-tools {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.tool {
    font-size: 40px;
    animation: toolFloat 2s infinite ease-in-out;
}

.tool:nth-child(1) {
    animation-delay: 0s;
}

.tool:nth-child(2) {
    animation-delay: 0.5s;
}

.tool:nth-child(3) {
    animation-delay: 1s;
}

@keyframes toolFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(5deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    75% {
        transform: translateY(-4px) rotate(-3deg);
    }
}

/* =========================== */
/*
//
// =================================================================
   ████████████████████████████████████████████████████████████████
   ███                                                          ███
   ███                ALLGEMEINE FUNKTIONEN                     ███
   ███                SEITEN ÜBERGREIFENDE                      ███
   ███                                                          ███
   ████████████████████████████████████████████████████████████████
   ================================================================= //
//
//
*/

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███               LOADING ANIMATION                     ███
       ███            SEITEN LADE BILDSCHIRM                   ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */
/* =========================== */

/* Main Loading Screen */
.loading-screen {
    /* Loading screen aktiviert - funktioniert nur bei Seitenstart und Navigation */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--loading-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    opacity: 1;
    visibility: visible;
}

.loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-container {
    text-align: center;
    position: relative;
}

/* 3D Rotating Cube */
.loading-cube {
    width: 80px;
    height: 80px;
    margin: 0 auto 40px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 3s infinite linear;
}

.cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border: 2px solid var(--brand-primary);
    opacity: 0.8;
    box-shadow: 0 0 20px var(--loading-cube-shadow);
}

.cube-front { transform: rotateY(0deg) translateZ(40px); }
.cube-back { transform: rotateY(180deg) translateZ(40px); }
.cube-right { transform: rotateY(90deg) translateZ(40px); }
.cube-left { transform: rotateY(-90deg) translateZ(40px); }
.cube-top { transform: rotateX(90deg) translateZ(40px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes rotateCube {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Floating Particles */
.loading-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
    border-radius: 8px;
    box-shadow: 0 0 10px var(--brand-primary);
    animation: floatParticle 4s infinite ease-in-out;
}

.particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 3s;
}

.particle:nth-child(2) {
    top: 20%;
    right: 20%;
    animation-delay: 0.8s;
    animation-duration: 3.5s;
}

.particle:nth-child(3) {
    bottom: 20%;
    left: 20%;
    animation-delay: 1.6s;
    animation-duration: 4s;
}

.particle:nth-child(4) {
    bottom: 20%;
    right: 20%;
    animation-delay: 2.4s;
    animation-duration: 2.8s;
}

.particle:nth-child(5) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 3.2s;
    animation-duration: 3.2s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
}

/* Glitch Text Effect */
.loading-text {
    margin: 40px 0 30px;
}

.glitch-text {
    font-size: 32px;
    font-weight: 800;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    animation: glitch 2s infinite;
}

.glitch-text:before,
.glitch-text:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text:before {
    animation: glitchTop 1s infinite;
    color: var(--glitch-red);
    z-index: -1;
}

.glitch-text:after {
    animation: glitchBottom 1.5s infinite;
    color: var(--glitch-cyan);
    z-index: -2;
}

@keyframes glitch {
    0%, 100% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

@keyframes glitchTop {
    0%, 100% {
        transform: translate(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-1px, -1px);
    }
    20%, 40%, 60%, 80% {
        transform: translate(-1px, -1px);
    }
}

@keyframes glitchBottom {
    0%, 100% {
        transform: translate(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(1px, 1px);
    }
    20%, 40%, 60%, 80% {
        transform: translate(-1px, 1px);
    }
}

/* Loading Progress Bar */
.loading-bar {
    width: 200px;
    height: 4px;
    background: var(--green-alpha-20);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.loading-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-hover), var(--brand-primary));
    border-radius: 2px;
    animation: loadingProgress 2s infinite ease-in-out;
    box-shadow: 0 0 10px var(--loading-cube-shadow);
}

@keyframes loadingProgress {
    0% {
        width: 0%;
        transform: translateX(-100%);
    }
    50% {
        width: 100%;
        transform: translateX(0%);
    }
    100% {
        width: 100%;
        transform: translateX(100%);
    }
}

/* Page Transition Overlay */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface-0), var(--surface-1));
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    pointer-events: none;
}

.page-transition.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Video Loading Overlay */
.video-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black-alpha-90);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--card-radius); /* Unified radius */
}

.video-spinner {
    position: relative;
    width: 12px;
    height: 12px;
    margin-bottom: 3%;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid var(--brand-primary);
    border-radius: 8px;
    animation: spinRing 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: var(--brand-primary-hover);
    animation-delay: 0.3s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: var(--brand-primary-dark);
    animation-delay: 0.6s;
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.video-loading-overlay p {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}




    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███              LANGUAGE TOGGLE                        ███
       ███            SPRACHEN WECHSLER BUTTON                 ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* Language Toggle Button */

.language-toggle {
    position: fixed;
    bottom: 30px;
    bottom: max(30px, env(safe-area-inset-bottom));
    right: 30px;
    right: max(30px, env(safe-area-inset-right));
    z-index: 997; /* Lowered to be below header and mobile menu */
    /* Animation will be handled by JavaScript for better control */
}

.lang-btn {
    background: var(--brand-primary);
    color: var(--surface-0);
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--green-alpha-30);
    min-width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn:hover {
    background: var(--brand-primary-hover);

    box-shadow: 0 6px 20px var(--green-alpha-40);
}

.lang-btn:active {
    transform: translateY(0);
}

/* =========================== */
/* FIXED ABOUT ME SECTION FOR IPAD AIR 4 PORTRAIT MODE */
/* =========================== */

/* University logo styling - COMPACT DESKTOP SIZE (no breakpoints until 900px) */
.university-logo {
    height: 122px; /* Compact desktop size - slim and professional */
    border-radius: 24px; /* More rounded than profile image */
    font-size: 14px;
    cursor: pointer;
    aspect-ratio: 3/1; /* Wider aspect ratio - 3:1 instead of original ratio */
    border: none;
    object-fit: cover; /* Cover to fill the container properly */
    max-width: 100%;
    width: 100%; /* Full width to match profile image */
    transition: all 0.3s ease; /* Same smooth hover transition */
}

/* Customer logo styling - ENHANCED FOR DESKTOP */
.customer-placeholder {
    height: 120px; /* Default desktop size */
    border-radius: 16px; /* More rounded corners for desktop */
    font-size: 14px;
    aspect-ratio: 2400/1400;
    object-fit: cover; /* Cover for desktop to fill nicely */
    max-width: 100%;
    width: 100%; /* Full width for better coverage */
}

.university-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
/* Hover animation for university logo container - Same as customer logos */
.university-logo-container a {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease; /* Smooth transition */
}

.university-logo-container a:hover {
    transform: translateY(-2px); /* Same smooth hover animation as customer logos */
}

/* Desktop-specific sizing for university logo - BREAKPOINT REMOVED */
/* University logo now uses full size until 900px mobile breakpoint */

.customers-section {
    padding: 80px 50px;
    padding-left: max(50px, env(safe-area-inset-left));
    padding-right: max(50px, env(safe-area-inset-right));
    background: var(--surface-1);
}

.section-title {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 50px;
    color: var(--text-primary);
}

.customers-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.customers-text {
    color: var(--text-primary);
}

.customers-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 3%;
    opacity: 0.9;
}

.customers-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px; /* Increased gap for better spacing */
}

/* Customer logo linking styles - ENHANCED WITH ANIMATIONS */
.customer-logo-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px; /* Match the image border radius */
    overflow: hidden; /* Ensure rounded corners are clean */
    transition: all 0.3s ease;
    background: none !important; /* Ensure no background */
}

.customer-logo-link:hover {
    transform: translateY(-2px); /* Subtle lift without shadow */
}

.customer-logo-link .customer-placeholder {
    background: var(--gradient-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px; /* Ensure consistent rounding */
}
.customer-logo-link .customer-logo {
    background: var(--gradient-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px; /* Ensure consistent rounding */
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: center;
    transition: all 0.3s ease;
}

/* ===== PROFESSIONAL LOGO PLACEHOLDERS ===== */
.professional-placeholder {
    cursor: default;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
    border: 1px solid var(--border-light);
    padding: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.professional-placeholder:hover {

    border-color: var(--brand-primary);
    box-shadow: 0 4px 20px var(--green-alpha-15);
}

.professional-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.company-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    opacity: 0.9;
}


/* Apple-style Logo */
.apple-style .apple-logo {
    position: relative;
    width: 24px;
    height: 28px;
}

.apple-style .apple-shape {
    width: 20px;
    height: 24px;
    background: var(--text-primary);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
}

.apple-style .apple-shape::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 2px;
    width: 6px;
    height: 8px;
    background: var(--surface-1);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.apple-style .apple-leaf {
    position: absolute;
    top: -2px;
    right: 6px;
    width: 6px;
    height: 4px;
    background: var(--text-primary);
    border-radius: 8px;
    transform: rotate(30deg);
}

/* Tech-style Logo */
.tech-style .tech-circle {
    position: relative;
    width: 28px;
    height: 28px;
    border: 2px solid var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-style .inner-circle {
    width: 12px;
    height: 12px;
    background: var(--brand-primary);
    border-radius: 8px;
}

.tech-style .tech-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    opacity: 0.5;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* ===== FADE-IN ANIMATIONS ===== */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.fade-in-element[data-delay="0"] { transition-delay: 0ms; }
.fade-in-element[data-delay="100"] { transition-delay: 100ms; }
.fade-in-element[data-delay="200"] { transition-delay: 200ms; }
.fade-in-element[data-delay="300"] { transition-delay: 300ms; }
.fade-in-element[data-delay="400"] { transition-delay: 400ms; }
.fade-in-element[data-delay="500"] { transition-delay: 500ms; }

/* =========================== */
/* IPAD AIR 4 SPECIFIC ABOUT ME FIXES */
/* =========================== */

/* iPad Air 4 Portrait Mode - LOGO FIXES */
@media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* FIXED: University Logo for iPad Air 4 Portrait */
    .university-logo {
        height: 100px !important; /* Increased from 80px for better visibility */
        max-height: 100px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important; /* Ensure logo fits properly */
        object-position: center !important;
    }
    
    /* FIXED: About Profile Image for iPad Air 4 Portrait */
    .about-placeholder {
        height: 220px !important; /* Reduced from 300px to 220px */
        max-height: 220px !important;
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* Adjust spacing for better layout */
    .about-image-section {
        gap: 15px !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure containers don't overflow */
    .university-logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
    }
    
    /* Better text sizing for iPad Air 4 Portrait */
    .about-text .intro-text {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
    
    .about-text p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* iPad Air 4 Landscape Mode - LOGO FIXES - BREAKPOINT REMOVED FOR PIXL VISN LOGO */
/* University Logo breakpoint at 1194px removed - now only 900px breakpoint remains */

/* General iPad Air 4 Media Query - LOGO FIXES */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* About section improvements for iPad Air 4 */
    .about-hero {
        padding: 60px 30px !important;
    }
    
    .about-content {
        gap: 50px !important;
    }
    
    /* Ensure all containers handle overflow properly */
    .about-container,
    .customers-content {
        max-width: 100% !important;
    }
}
/* Cookie Banner Container - Fixed am unteren Rand */
.cookie-banner {
    position: fixed;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    width: 600px;
    z-index: 9999;
    
    /* Versteckt bis angezeigt */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(100px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.cookie-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Cookie Card - Inspiriert von Ihrem Design mit grünen Akzenten */
.cookie-card {
    background: linear-gradient(135deg, 
        var(--surface-modal-98) 0%, 
        var(--surface-dark-95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    padding: 4% 5%;
    box-shadow: 
        0 20px 60px var(--black-alpha-50),
        0 0 0 1px var(--green-alpha-15),
        inset 0 1px 0 var(--white-alpha-08);
    position: relative;
    overflow: visible;
}

/* Cookie "Krümel" Dekoration */
.cookie-crumbs {
    position: absolute;
    bottom: 3%;
    left: 4%;
    display: flex;
    gap: 6px;
    opacity: 0.15;
}

.crumb {
    width: 6px;
    height: 6px;
    background: var(--brand-primary, var(--brand-primary));
    border-radius: 8px;
}

.crumb:nth-child(2) {
    width: 4px;
    height: 4px;
}

.crumb:nth-child(3) {
    width: 3px;
    height: 3px;
}

/* Close Button - Minimalistisch */
.cookie-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--white-alpha-05);
    border: 1px solid var(--white-alpha-10);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white-alpha-60);
    transition: all 0.3s ease;
}

.cookie-close:hover {
    background: var(--error-alpha-15);
    color: var(--brand-error);
    border-color: var(--error-alpha-40);
    transform: scale(1.05);
}

.cookie-close:active {
    transform: scale(0.95);
}

/* Cookie Icon Placeholder Container */
.cookie-icon-container {
    width: 70px;
    height: 70px;
    min-width: 70px;
    flex-shrink: 0;
    background: linear-gradient(135deg, 
        var(--green-alpha-12) 0%, 
        var(--green-alpha-06) 100%);
    border: 2px solid var(--green-alpha-25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
    box-shadow: 
        0 8px 25px var(--green-alpha-15),
        inset 0 2px 8px var(--green-alpha-10);
}
/* Cookie Particles - Subtle, small, and slow floating effect */
.cookie-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--green-alpha-25);
    border-radius: 50%;
    opacity: 0.2;
    animation: floatParticle 12s ease-in-out infinite;
    box-shadow: 0 0 3px var(--green-alpha-15);
}

.cookie-particle-1 {
    top: -8px;
    left: 45%;
    animation-delay: 0s;
    animation-duration: 15s;
}

.cookie-particle-2 {
    top: 5%;
    right: -12px;
    animation-delay: 2.5s;
    animation-duration: 13s;
}

.cookie-particle-3 {
    bottom: 15%;
    right: -8px;
    animation-delay: 5s;
    animation-duration: 14s;
}

.cookie-particle-4 {
    bottom: -12px;
    left: 55%;
    animation-delay: 7.5s;
    animation-duration: 12s;
}

.cookie-particle-5 {
    bottom: 8%;
    left: -15px;
    animation-delay: 10s;
    animation-duration: 16s;
}

.cookie-particle-6 {
    top: 12%;
    left: -8px;
    animation-delay: 1.5s;
    animation-duration: 11s;
}
.cookie-particle-7 {
    top: 25%;
    right: 5%;
    animation-delay: 4s;
    animation-duration: 15s;
}

.cookie-particle-8 {
    top: 65%;
    left: 8%;
    animation-delay: 6s;
    animation-duration: 13s;
}

.cookie-particle-9 {
    top: 40%;
    right: -5px;
    animation-delay: 8.5s;
    animation-duration: 14s;
}

.cookie-particle-10 {
    bottom: 35%;
    left: -10px;
    animation-delay: 3s;
    animation-duration: 12.5s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-5px) scale(1.05);
        opacity: 0.3;
    }
}

/* Pulsierender Glow-Effekt */
.cookie-icon-container::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        var(--green-alpha-20) 0%, 
        transparent 70%);
    animation: cookieGlow 3s ease-in-out infinite;
}

@keyframes cookieGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Cookie Content Layout */
.cookie-content {
    display: flex;
    gap: 4%;
    align-items: center;
}

/* Cookie Text Container */
.cookie-text {
    flex: 1;
    min-width: 0;
}

.cookie-title {
    font-size: clamp(18px, 3.5vw, 20px);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2% 0;
    letter-spacing: -0.02em;
}

.cookie-description {
    font-size: clamp(13px, 2.5vw, 14px);
    line-height: 1.6;
    color: var(--white-alpha-75);
    margin: 0 0 4% 0;
}

/* Cookie Privacy Links - Data Protection and Legal Info */
.cookie-privacy-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4% 0;
    flex-wrap: wrap;
}

.cookie-privacy-link {
    font-size: clamp(12px, 2.3vw, 13px);
    color: var(--green-alpha-85);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.cookie-privacy-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--brand-primary, var(--brand-primary));
    transition: width 0.3s ease;
}

.cookie-privacy-link:hover {
    color: var(--brand-primary, var(--brand-primary));
}

.cookie-privacy-link:hover::after {
    width: 100%;
}

.cookie-privacy-separator {
    color: var(--white-alpha-30);
    font-size: clamp(11px, 2.2vw, 12px);
}

/* Cookie Actions - Button Container */
.cookie-actions {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
}

/* Cookie Button Base Style */
.cookie-btn {
    padding: 3% 6%;
    border-radius: 12px;
    font-size: clamp(14px, 2.5vw, 15px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Accept Button - Grüner Akzent */
.cookie-btn-accept {
    background: linear-gradient(135deg, 
        var(--brand-primary, var(--brand-primary)) 0%, 
        var(--brand-primary-hover, var(--brand-primary-hover)) 100%);
    color: var(--brand-black);
    box-shadow: 
        0 8px 25px var(--green-alpha-35),
        inset 0 1px 0 var(--white-alpha-20);
}

.cookie-btn-accept:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 
        0 12px 35px var(--green-alpha-50),
        inset 0 1px 0 var(--white-alpha-30);
}

.cookie-btn-accept:active {
    transform: translateY(0) scale(0.98);
}

/* Decline Button - Subtiler */
.cookie-btn-decline {
    background: var(--white-alpha-05);
    color: var(--white-alpha-90);
    border: 1px solid var(--white-alpha-15);
}

.cookie-btn-decline:hover {
    background: var(--white-alpha-10);
    border-color: var(--green-alpha-30);
    box-shadow: 0 0 20px var(--green-alpha-15);
}

/* Confirmation Message */
.cookie-confirmation {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--green-alpha-95);
    color: var(--brand-black);
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 8px 25px var(--green-alpha-40);
    z-index: 10000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cookie-confirmation.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive Design */

/* Tablet Landscape (1024px - 900px) */
@media (max-width: 1024px) {
    .cookie-banner {
        max-width: 85%;
    }
    
    .cookie-card {
        padding: 4% 5%;
    }
    
    .cookie-icon-container {
        width: 65px;
        height: 65px;
        min-width: 65px;
        font-size: 36px;
    }
    
    .cookie-close {
        top: 16px;
        right: 16px;
    }
}

/* Tablet Portrait (900px - 768px) */
@media (max-width: 900px) {
    .cookie-banner {
        max-width: 88%;
        bottom: 4%;
    }
    
    .cookie-card {
        padding: 5% 6%;
        border-radius: 20px;
    }
    
    .cookie-content {
        gap: 5%;
    }
    
    .cookie-icon-container {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 32px;
    }
    
    .cookie-btn {
        padding: 3.5% 7%;
    }
    
    .cookie-close {
        top: 14px;
        right: 14px;
    }
}

/* Mobile Large (560px - 480px) */
@media (max-width: 560px) {
    .cookie-banner {
        max-width: calc(100% - 32px); /* 16px Abstand auf jeder Seite */
        bottom: 16px;
        left: 50%;
        right: auto;
        width: calc(100% - 32px);
    }
    
    .cookie-card {
        padding: 20px 16px 16px 16px; /* Feste px-Werte statt Prozent */
        border-radius: 18px;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .cookie-icon-container {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 34px;
        margin-bottom: 5px;
    }
    
    .cookie-title {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    .cookie-description {
        font-size: 13px;
        margin-bottom: 12px;
        line-height: 1.5;
    }
    
    .cookie-privacy-links {
        justify-content: center;
        margin-bottom: 12px;
    }
    
    .cookie-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-top: 8px;
    }
    
    .cookie-btn {
        width: 100%;
        padding: 14px 20px;
        justify-content: center;
        display: flex;
    }
    
    .cookie-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        background: var(--black-alpha-50);
        border: 1px solid var(--white-alpha-15);
    }
    
    .cookie-close:hover {
        background: var(--error-alpha-20);
        border-color: var(--error-alpha-50);
    }
    
    .cookie-crumbs {
        bottom: 4%;
        left: 5%;
    }
}

/* Mobile Medium (480px - 375px) */
@media (max-width: 480px) {
    .cookie-banner {
        max-width: calc(100% - 24px); /* 12px Abstand auf jeder Seite */
        bottom: 12px;
        width: calc(100% - 24px);
    }
    
    .cookie-card {
        padding: 18px 14px 14px 14px; /* Feste px-Werte */
        border-radius: 16px;
    }
    
    .cookie-icon-container {
        width: 55px;
        height: 55px;
        min-width: 55px;
        font-size: 30px;
    }
    
    .cookie-title {
        font-size: 17px;
        margin-bottom: 5px;
    }
    
    .cookie-description {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .cookie-privacy-links {
        margin-bottom: 10px;
    }
    
    .cookie-actions {
        gap: 10px;
        margin-top: 8px;
    }
    
    .cookie-btn {
        padding: 13px 20px;
        font-size: 14px;
    }
    
    .cookie-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: var(--black-alpha-60);
    }
    
    .cookie-close:hover {
        background: var(--error-alpha-20);
        border-color: var(--error-alpha-50);
    }
}

/* Mobile Small (< 375px) */
@media (max-width: 375px) {
    .cookie-banner {
        max-width: calc(100% - 20px); /* 10px Abstand auf jeder Seite */
        bottom: 10px;
        width: calc(100% - 20px);
    }
    
    .cookie-card {
        padding: 16px 12px 12px 12px; /* Feste px-Werte */
        border-radius: 8px;
    }
    
    .cookie-icon-container {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 28px;
    }
    
    .cookie-title {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .cookie-description {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    .cookie-privacy-links {
        margin-bottom: 10px;
    }
    
    .cookie-actions {
        gap: 10px;
        margin-top: 8px;
    }
    
    .cookie-btn {
        padding: 12px 18px;
        font-size: 13px;
        border-radius: 10px;
    }
    
    .cookie-close {
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px;
        background: var(--black-alpha-70);
    }
    
    .cookie-close:hover {
        background: var(--error-alpha-25);
        border-color: var(--error-alpha-60);
    }
    
    /* Enhanced mobile like button adjustments for very small devices */
    .project-modal-like-btn {
        padding: 12px 12px;
        min-height: 70px;
        flex-wrap: nowrap;
    }
    
    .project-modal-like-text {
        line-height: 1.4;
    }
    
    .project-modal-like-section {
        padding: 16px 12px;
    }

    .cookie-close svg {
        width: 14px;
        height: 14px;
    }
    
    .crumb {
        width: 5px;
        height: 5px;
    }
    
    .crumb:nth-child(2) {
        width: 3.5px;
        height: 3.5px;
    }
    
    .crumb:nth-child(3) {
        width: 2.5px;
        height: 2.5px;
    }
}


/*
//
// =================================================================
   ████████████████████████████████████████████████████████████████
   ███                                                          ███
   ███                RESPONSIVE DESIGN SYSTEM                  ███
   ███              MOBILE & TABLET LAYOUTS                     ███
   ███                                                          ███
   ████████████████████████████████████████████████████████████████
   ================================================================= //
//
//
*/

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                TABLET LAYOUT                        ███
       ███               (MAX-WIDTH: 1024PX)                   ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* =========================== */
/* ENHANCED MOBILE RESPONSIVENESS WITH HAMBURGER MENU */
/* =========================== */

/* ========================================
   TABLET BREAKPOINT - 2 SPALTEN (900px)
   ======================================== */
@media (max-width: 900px) {
    /* TABLET: 2 COLUMNS - LINEAR SCALING */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5%;
        padding: 0 2%;
    }
    
    /* Einzelne Karte in 2-Spalten Layout schmaler machen */
    .projects-grid .project-card-wrapper:only-child {
        max-width: 70%;
    }
    
    /* TABLET SKILLS GRID - 6 COLUMNS LIKE DESKTOP BUT SMALLER */
    .skills-grid {
        grid-template-columns: repeat(6, 1fr); /* Same 6 columns as desktop */
        gap: 20px; /* Medium gap for tablet */
        max-width: 1200px;
    }
    
    .skill-btn {
        min-height: 85px; /* Medium height for tablet */
        font-size: 14px; /* Medium font size */
        padding: 18px 15px; /* Medium padding */
    }
    
}

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                 MOBILE LAYOUT                       ███
       ███               (MAX-WIDTH: 900PX)                    ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* =========================== */
/* CRITICAL MOBILE FIX FOR LANGUAGE TOGGLE BUTTON */
/* =========================== */

@media (max-width: 900px) {
    /* =========================== */
    /* MOBILE HEADER LAYOUT FIXES */
    /* =========================== */
    
    /* SMOOTH MOBILE HEADER - Perfekt flüssige Animation */
    .header {
        /* Optimierte Animation mit perfektem Timing für flüssige Bewegung */
        animation: headerFadeInMobile 1.0s ease-out 0.3s forwards !important;
        /* Isoliere Header-Transforms vom Rest der Seite */
        transform-origin: center top;
        contain: layout style;
        will-change: opacity;
        /* Verhindere, dass andere Animationen den Header beeinflussen */
        position: fixed !important;
        isolation: isolate;
        /* Wichtiger Fix: Keine Transforms am Header auf Mobile */
        transform: none !important;
    }
    
    /* Verbesserte Story Section Animation Isolation - Header bleibt unberührt */
    .story-section .scroll-animate.slide-left,
    .story-section .scroll-animate.slide-right {
        /* Verwende contain um Animationen zu isolieren */
        contain: layout style;
        /* Deaktiviere nur horizontale Transforms, die den Header beeinflussen könnten */
        transform: translateX(0) !important;
        will-change: opacity;
    }
    
    .story-section .scroll-animate.slide-left.animate-in,
    .story-section .scroll-animate.slide-right.animate-in {
        /* Verwende subtile Animationen, die den Header nicht beeinflussen */
        transform: translateX(0) scale(1.02) !important;
        opacity: 1;
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .nav {
        padding: 20px 25px !important;
        height: 70px !important;
        gap: 0 !important;
    }
    
    /* Show mobile hamburger menu */
    .mobile-menu-toggle {
        display: flex !important;
        order: 3;
        margin-left: auto;
    }
    
    /* Hide desktop navigation elements on mobile */
    .nav-links {
        display: none !important;
    }
    
    .nav-social {
        display: none !important;
    }
    
    /* Show mobile social icons in center */
    .nav-social-mobile {
        display: flex !important;
        order: 2;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* Dynamic viewport height für mobile Browser */
        background: var(--overlay-dark);
        z-index: 10001;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    /* Fallback für Browser ohne 100dvh Support */
    @supports not (height: 100dvh) {
        .mobile-menu-overlay {
            height: 100vh;
        }
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Gleiche Verteilung wie Desktop */
        align-items: center;
        height: 100%;
        text-align: center;
        /* Safe Area Inset für mobile Geräte in Media Query mit iOS Fallbacks */
        padding-top: 60px; /* Fallback */
        padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
        padding-top: max(60px, calc(env(safe-area-inset-top) + 20px));
        
        padding-right: 20px; /* Fallback */
        padding-right: constant(safe-area-inset-right); /* iOS 11.0-11.2 */
        padding-right: max(20px, calc(env(safe-area-inset-right) + 20px));
        
        padding-bottom: 20px; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
        padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
        
        padding-left: 20px; /* Fallback */
        padding-left: constant(safe-area-inset-left); /* iOS 11.0-11.2 */
        padding-left: max(20px, calc(env(safe-area-inset-left) + 20px));
    }
    
    /* Fallback für Browser ohne safe-area-inset Support in Media Query */
    @supports not (padding: env(safe-area-inset-top)) {
        .mobile-menu-content {
            padding: 80px 30px 40px 30px !important;
        }
    }
    
    /* Show mobile navigation */
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Etwas mehr Abstand zwischen den Links */
        margin-bottom: 0;
        margin-top: 10px; /* Weniger Abstand vom X */
    }
    
    /* Show mobile language toggle */
    .mobile-nav-language {
        display: flex !important;
    }
    
    /* Show mobile social icons */
    .mobile-nav-social {
        display: flex !important;
        /* Safe Area Inset für mobile Social Icons in Media Query mit iOS Fallbacks */
        margin-bottom: 20px !important; /* Fallback */
        margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        margin-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px)) !important; /* Modern browsers */
        
        padding-bottom: 15px !important; /* Fallback */
        padding-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0-11.2 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 15px) !important; /* Modern browsers */
    }
    
    /* Fallback für Browser ohne safe-area-inset Support */
    @supports not (margin-bottom: env(safe-area-inset-bottom)) {
        .mobile-nav-social {
            margin-bottom: 35px !important;
            padding-bottom: 20px !important;
        }
    }
    
    /* CRITICAL MOBILE FIX FOR LANGUAGE TOGGLE POSITIONING */
    
    /* MOBILE LANGUAGE TOGGLE - FIXED POSITIONING AND SIZE */
    .language-toggle {
        padding: 10px 5px;
        height: 70px;
    }
    
    .nav-logo a {
        font-size: 28px;
        font-weight: 900;
    }
    
    /* Hide desktop navigation and social on mobile */
    .nav-links,
    .nav-social {
        display: none;
    }
    
    /* Show mobile social icons in CENTER */
    .nav-social-mobile {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        order: 2;
    }
    
    /* Show mobile hamburger menu on RIGHT */
    .mobile-menu-toggle {
        display: flex;
        order: 3;
        z-index: 10002 !important; /* Ensure it's always above everything */
        position: relative !important;
        color: var(--text-primary) !important;
    }
    
    /* Force white color for hamburger lines on mobile */
    .hamburger-line {
        background: var(--text-primary) !important;
        color: var(--text-primary) !important;
    }
    
    /* Adjust main content for smaller mobile header */
    .about-main,
    .contact-main,
    .legal-main {
        margin-top: 70px;
    }


    /* ===== GLOBAL MOBILE CONFLICT FIXES FOR INNER PAGES ===== */
    /* Prevent transforms on page wrappers so position:fixed header and language toggle are not affected */
    .about-main.scroll-animate,
    .contact-main.scroll-animate,
    .legal-main.scroll-animate {
        transform: none !important;
        will-change: opacity;
    }

    .about-main.scroll-animate.animate-in,
    .contact-main.scroll-animate.animate-in,
    .legal-main.scroll-animate.animate-in {
        transform: none !important;
        opacity: 1 !important;
        transition: opacity 0.5s ease;
    }

    /* Neutralize top hero wrappers on those pages (keep opacity-only reveal) */
    .about-hero.scroll-animate,
    .contact-hero.scroll-animate,
    .legal-hero.scroll-animate {
        transform: none !important;
        will-change: opacity;
    }

    .about-hero.scroll-animate.animate-in,
    .contact-hero.scroll-animate.animate-in,
    .legal-hero.scroll-animate.animate-in {
        transform: none !important;
        opacity: 1 !important;
        transition: opacity 0.5s ease;
    }

    /* Isolate scroll animations to prevent header interference while keeping animations intact */
    .about-main .scroll-animate,
    .contact-main .scroll-animate,
    .legal-main .scroll-animate {
        /* Use CSS containment to isolate animations and prevent them from affecting fixed header */
        contain: layout style paint;
        /* Create new stacking context to isolate transforms */
        isolation: isolate;
    }

    /* Specifically isolate slide-left and slide-right animations like on Index "My Story" fix */
    .about-main .scroll-animate.slide-left,
    .about-main .scroll-animate.slide-right,
    .contact-main .scroll-animate.slide-left,
    .contact-main .scroll-animate.slide-right,
    .legal-main .scroll-animate.slide-left,
    .legal-main .scroll-animate.slide-right {
        /* Extra containment for horizontal slides that can affect header positioning */
        contain: layout style paint;
        /* Force a new containing block */
        transform: translateZ(0);
        /* Ensure animations stay within bounds */
        overflow: hidden;
    }

    /* Ensure main containers don't interfere with header */
    .contact-main.scroll-animate,
    .legal-main.scroll-animate,
    .about-main.scroll-animate {
        /* Prevent main containers from affecting fixed header */
        contain: layout style;
        /* Disable transforms on main containers that could move header */
        transform: none !important;
        will-change: opacity;
    }

    /* Keep hero sections stable */
    .contact-hero.scroll-animate,
    .legal-hero.scroll-animate,
    .about-hero.scroll-animate {
        /* Prevent hero sections from affecting header positioning */
        contain: layout style;
        transform: none !important;
        will-change: opacity;
    }

    /* Keep language toggle fixed and stable on mobile */
    .language-toggle {
        position: fixed !important;
        z-index: 10050 !important;
        /* WICHTIG: transform: none !important entfernt - wird nur für echte Mobile (<770px) angewendet */
    }


    /* =========================== */
    /* MOBILE ABOUT PAGE SPECIFIC FIXES */
    /* =========================== */
    
    /* Ensure About page content doesn't overflow on mobile */
    .about-hero {
        padding: 60px 20px !important;
    }
    
    .about-container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .page-title {
        font-size: clamp(32px, 10vw, 48px) !important;
        margin-bottom: 30px !important;
        text-align: center;
        word-wrap: break-word;
    }
    
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 40px;
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .about-text {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    
    .about-image-section {
        order: 1;
        gap: 20px;
        align-items: center !important;
        justify-content: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .about-image {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .about-placeholder {
        height: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        margin: 0 auto !important;
        object-fit: cover !important;
        object-position: center !important;
        flex-shrink: 0 !important;
    }
    
    /* FIXED MOBILE UNIVERSITY LOGO - NO MORE GRAY BOX, CENTERED */
    .university-logo {
        height: 80px !important; /* Smaller height for mobile */
        width: 100% !important;
        max-width: 280px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        margin: 0 auto !important;
        object-fit: cover !important; /* Changed back to cover to fill properly */
        object-position: center !important;
        display: block !important;
        /* REMOVE any background or placeholder styles that cause gray box */
        background: none !important;
        border: none !important;
    }
    
    .university-logo-container {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* REMOVE any background styles */
        background: none !important;
        /* Ensure no fallback placeholder shows */
    }
    
    /* HIDE the fallback placeholder div completely on mobile */
    .university-logo-container .placeholder-image.university-logo {
        display: none !important;
    }
    
    .intro-text {
        font-size: 17px !important;
        font-weight: 400;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        text-align: left !important;
        word-wrap: break-word;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .about-text p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
        opacity: 0.95;
        text-align: left !important;
        word-wrap: break-word;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* ===== CUSTOMER LOGOS MOBILE SECTION (CONSOLIDATED) ===== */
    .customers-section {
        padding: 60px 20px !important;
    }
    
    .section-title {
        font-size: clamp(28px, 8vw, 36px) !important;
        margin-bottom: 30px !important;
        text-align: center;
        word-wrap: break-word;
    }
    
    .customers-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .customers-text {
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 10px !important;
        order: 1;
    }
    
    .customers-text p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 18px !important;
        opacity: 0.95;
        word-wrap: break-word;
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* ===== CUSTOMER LOGOS: 641px to 900px (FROZEN SIZE) ===== */
@media (min-width: 641px) and (max-width: 900px) {
    /* Customer Gallery - 2 Column Grid */
    .customers-gallery {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        order: 2;
        justify-items: center !important;
    }
    
    /* Customer Item Container - FROZEN between 641px-900px */
    .customer-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto !important;
        background: none !important;
    }
    
    /* Customer Logo Link - FROZEN between 641px-900px */
    .customer-logo-link {
        width: 100% !important;
        max-width: 240px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: none !important;
    }
    
    /* Customer Placeholder Image - FROZEN SIZE (doesn't change between 641-900px) */
    .customer-placeholder,
    .customer-logo-link .customer-placeholder {
        height: 90px !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        aspect-ratio: 2400/1400 !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        transition: all 0.3s ease;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 auto !important;
        background: none !important;
        border: none !important;
    }
}

/* ===== CUSTOMER LOGOS: Under 640px (RESPONSIVE - gets smaller) ===== */
@media (max-width: 640px) {
    /* Customer Gallery - 2 Column Grid */
    .customers-gallery {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        order: 2;
        justify-items: center !important;
    }
    
    /* Customer Item Container - Responsive */
    .customer-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        background: none !important;
    }
    
    /* Customer Logo Link - Responsive */
    .customer-logo-link {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: none !important;
    }
    
    /* Customer Placeholder Image - Responsive (scales down with screen) */
    .customer-placeholder,
    .customer-logo-link .customer-placeholder {
        height: 90px !important;
        width: 100% !important;
        max-width: 240px !important;
        aspect-ratio: 2400/1400 !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        transition: all 0.3s ease;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 auto !important;
        background: none !important;
        border: none !important;
    }
}

/* ===================================================
   CONTACT PAGE - RESPONSIVE BREAKPOINTS FIX
   =================================================== */

/* Mittlere bis Große Laptops - Angepasste Form ab 1200px */
@media (max-width: 1200px) {
    .contact-content {
        grid-template-columns: 2fr 3fr; /* 40% links / 60% rechts - angepasst unter 1200px */
        gap: 35px;
    }
    
    .contact-hero {
        padding: 80px 30px;
    }
    
    .contact-form-section {
        margin-top: 0; /* Kein negatives Margin mehr unter 1200px */
        width: 100%;
        max-width: 100%;
    }
    
    .contact-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 30px 25px; /* Angepasstes Padding */
    }
    
    .contact-form.with-message {
        margin-top: clamp(0px, 15vw, 180px);
    }
}

/* Tablets - 40/60 Layout bei 1000px */
@media (max-width: 1000px) {
    .contact-content {
        grid-template-columns: 2fr 3fr; /* 40% links / 60% rechts */
        gap: 30px;
    }
    
    /* Form selbst anpassen */
    .contact-form {
        padding: 28px 20px; /* Leicht kleineres Padding */
    }
    
    /* Form Row bei 1000px noch zweispaltig lassen */
    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    /* Form Group Input Felder leicht kleiner */
    .form-group input,
    .form-group textarea {
        padding: 11px 13px;
        font-size: 15px;
    }

    /* General mobile fixes for all elements */
    body {

        max-width: 100% !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hero section on mobile */
    .hero {
        padding: 20px;
        min-height: calc(100vh - 70px);
        justify-content: center;
    }
    
    .hero-content {
        text-align: center;
        max-width: 100%;
        padding: 20px;
        margin-left: 0;
        margin-top: 40px;
    }
    
    .hero-title {
        font-size: clamp(36px, 15vw, 64px);
        line-height: 0.9;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: clamp(14px, 4vw, 18px);
        margin-top: 15px;
    }
    
    .hero-demo-reel-btn {
        padding: 10px 20px;
        font-size: 13px;
        margin-top: 25px;
        border-radius: 25px;
        gap: 6px;
    }
    
    .hero-demo-reel-btn .play-icon {
        width: 16px;
        height: 16px;
    }

    /* Story section on mobile */
    .story-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .story-content {
        text-align: center;
    }
    
    .story-content h2 {
        font-size: clamp(40px, 12vw, 60px);
    }
    
    /* MOBILE: 2 COLUMNS (simplified) */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2%;
        padding: 0 2%;
        margin-bottom: 40px; /* Zusätzlicher Abstand nach unten */
    }
    
    /* Einzelne Karte in 2-Spalten Mobile Layout schmaler machen */
    .projects-grid .project-card-wrapper:only-child {
        max-width: 50% !important; /* Auch hier schmaler für Konsistenz */
    }
    
    /* Extra Abstand für Projects Section auf Mobile (2 columns) */
    .projects-section {
        padding-bottom: 100px !important; /* Erhöhter Abstand nach unten */
    }
    
}

/* VERY SMALL MOBILE: 1 COLUMN (simplified) */
@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 3%;
        padding: 0 10%; /* Noch mehr Padding für bessere Zentrierung */
        margin-bottom: 100px; /* Noch mehr Abstand nach unten */
        justify-items: center; /* Zentriert die Karten */
    }
    
    /* Projekt-Karten auf Mobile SEHR schmaler machen - 20% schmaler */
    .projects-grid .project-card-wrapper {
        max-width: 90% !important; /* Alle Karten werden SEHR DEUTLICH schmaler */
        width: 100%;
    }
    
    /* Einzelne Karte in 1-Spalten Layout noch schmaler machen */
    .projects-grid .project-card-wrapper:only-child {
        max-width: 80% !important; /* Einzelne Karte noch SEHR DEUTLICH schmaler */
    }
    
    /* Extra Abstand für Projects Section auf Mobile */
    .projects-section {
        padding-bottom: 200px !important; /* Maximaler Abstand nach unten */
    }
    
    /* Student Work: Zusätzlicher Abstand */
    .student-work {
        margin-top: 80px;
    }
}

/* Zurück zum normalen Mobile-Bereich */
@media (max-width: 768px) {
    
    /* Contact Content auf kleine Bildschirme stapeln */
    .contact-content {
        grid-template-columns: 1fr !important; /* Single column für mobile */
        gap: 40px;
    }
    
    /* FIXED: Language Toggle für echte Mobile (<768px) - Animation deaktivieren */
    .language-toggle {
        bottom: 20px !important;
        right: 20px !important;
        transform: none !important;
        transition: none !important;
        max-width: calc(100% - 40px);
        max-height: 60px;
    }
    
    .lang-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-width: 50px !important;
        height: 45px !important;
        border-radius: 25px !important;
    }
    
    /* MOBILE SKILLS GRID - 3 COLUMNS FOR BETTER READABILITY */
    .skills-grid {
        grid-template-columns: repeat(3, 1fr); /* Changed to 3 columns for mobile */
        gap: 15px; /* Larger gap for mobile */
        max-width: 100%;
        padding: 0 20px;
    }
    
    .skill-btn {
        min-height: 80px; /* Much larger height for mobile */
        font-size: 14px; /* Larger font size for mobile */
        padding: 15px 10px; /* Much larger padding */
        line-height: 1.3;
        border-radius: 10px; /* Slightly larger border radius */
    }
    
    .footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(30px, env(safe-area-inset-bottom));
    }
    
    .story-section,
    .projects-section,
    .skills-section,
    .contact-hero,
    .legal-hero {
        padding: 60px 20px;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
    
    /* Contact form message positioning on mobile */
    #messageArea {
        position: relative;
        top: auto;
        margin-bottom: 3%;
    }
    
    .contact-form.with-message {
        margin-top: 0;
    }
    
    .contact-form-section {
        margin-top: 0;
    }
    
    /* Form Row auf mobile single column */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    
    /* Form Inputs wieder normale Größe */
    .form-group input,
    .form-group textarea {
        padding: 12px 15px;
        font-size: 16px;
    }

    /* Loading screen mobile adjustments */
    .loading-cube {
        width: 60px;
        height: 60px;
    }
    
    .cube-face {
        width: 60px;
        height: 60px;
    }
    
    .cube-front { transform: rotateY(0deg) translateZ(30px); }
    .cube-back { transform: rotateY(180deg) translateZ(30px); }
    .cube-right { transform: rotateY(90deg) translateZ(30px); }
    .cube-left { transform: rotateY(-90deg) translateZ(30px); }
    .cube-top { transform: rotateX(90deg) translateZ(30px); }
    .cube-bottom { transform: rotateX(-90deg) translateZ(30px); }
    
    .glitch-text {
        font-size: 24px;
        letter-spacing: 2px;
    }
    
    .loading-bar {
        width: 150px;
    }
    
    /* Mobile video spinner size */
    .video-spinner {
        width: 9px;
        height: 9px;
    }

    /* Mobile construction overlay adjustments */
    .construction-overlay {
        padding: 0;
    }
    
    .construction-content {
        padding: 40px 20px;
    }
    
    .construction-barrier-top,
    .construction-barrier-bottom {
        height: 20px;
    }
    
    /* Mobile project card overlay adjustments */
    .project-card-overlay .construction-barrier-top,
    .project-card-overlay .construction-barrier-bottom {
        height: 10px; /* 50% smaller than original 20px on mobile */
        /* Keep original background-size for proper stripes */
    }
    
    /* Mobile-specific adjustments - smaller and more compact */
    .project-card-overlay .construction-content {
        padding: 16px 12px; /* Reduced padding on mobile for compact design */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .project-card-overlay .construction-title {
        font-size: 22px; /* Reduced from 28px for more compact mobile display */
        margin-bottom: 5px;
        font-weight: 600;
        text-align: center;
        letter-spacing: 0.5px;
        line-height: 1.1;
    }
    
    .project-card-overlay .construction-text {
        font-size: 12px; /* Reduced from 15px for more compact mobile display */
        line-height: 1.3;
        margin-bottom: 12px;
        opacity: 0.9;
        text-align: center;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-card-overlay .construction-tools {
        gap: 8px; /* Reduced gap on mobile for compact layout */
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .project-card-overlay .construction-tools .tool {
        font-size: 16px; /* Reduced from 20px for more compact mobile display */
        filter: drop-shadow(0 1px 2px var(--black-alpha-30));
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .construction-icon {
        font-size: 60px;
        margin-bottom: 3%;
    }
    
    .construction-title {
        font-size: 32px;
        margin-bottom: 15px;
        letter-spacing: 2px;
    }
    
    .construction-text {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .construction-tools {
        gap: 20px;
        margin-bottom: 3%;
    }
    
    .tool {
        font-size: 30px;
    }
}


    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███            EXTRA SMALL MOBILE LAYOUT                ███
       ███               (MAX-WIDTH: 480PX)                    ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* Extra Small Mobile - Skills grid adjustment for very small screens */
@media (max-width: 480px) {
    /* =========================== */
    /* EXTRA CRITICAL MOBILE FIXES FOR LANGUAGE TOGGLE */
    /* =========================== */
    
    /* Even more aggressive positioning for very small screens */
    .language-toggle {
        bottom: 15px !important;
        bottom: max(15px, env(safe-area-inset-bottom)) !important;
        right: 15px !important;
        right: max(15px, env(safe-area-inset-right)) !important;
        transform: none !important;
        transition: none !important;
        position: fixed !important;
        z-index: 997 !important; /* Lowered to be below header and mobile menu */
        /* Prevent any overflow issues */
        max-width: calc(100% - 30px) !important;
        max-height: 50px !important;
    }
    
    .lang-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-width: 45px !important;
        height: 40px !important;
        border-radius: 20px !important;
        /* Ensure button stays visible */
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    /* Enhanced mobile menu content for small screens */
    .mobile-menu-content {
        width: 300px;
        padding: 60px 25px 20px 25px; /* Reduziertes oberes Padding */
        background: linear-gradient(135deg, 
            var(--surface-dark-98) 0%, 
            var(--surface-medium-92) 50%,
            var(--surface-dark-98) 100%);
        backdrop-filter: blur(25px) saturate(200%);
    }

    .mobile-nav-link {
        font-size: 18px;
        padding: 20px 22px;
        letter-spacing: 1px;
        border-radius: 8px;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        transform: translateX(10px) scale(1.01);
    }
    
    /* Skills remain 3 columns for very small screens */
    .skill-btn {
        min-height: 70px;
        font-size: 12px;
        padding: 12px 8px;
        gap: 10px;
    }
    
    .skills-grid {
        gap: 12px;
        padding: 0 15px;
    }
    
    /* Extra small mobile about page fixes */
    .about-hero {
        padding: 40px 15px !important;
    }
    
    .about-container {
        padding: 0 10px !important;
    }
    
    .page-title {
        font-size: clamp(28px, 10vw, 40px) !important;
        margin-bottom: 25px !important;
    }
    
    .about-content {
        gap: 25px !important;
        padding: 0 5px !important;
    }
    
    .about-image {
        max-width: 260px !important;
    }
    
    .about-placeholder {
        height: 260px !important;
        width: 260px !important;
        max-width: 260px !important;
        font-size: 11px !important;
        border-radius: 18px !important;
    }
    
    /* FIXED EXTRA SMALL MOBILE UNIVERSITY LOGO - NO GRAY BOX */
    .university-logo {
        height: 70px !important; /* Even smaller for extra small screens */
        max-width: 260px !important;
        font-size: 11px !important;
        /* ENSURE no gray background shows */
        background: none !important;
        border: none !important;
    }
    
    .university-logo-container {
        max-width: 260px !important;
        /* ENSURE no gray background shows */
        background: none !important;
    }
    
    /* HIDE placeholder completely on extra small screens */
    .university-logo-container .placeholder-image {
        display: none !important;
    }
    
    .intro-text {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        line-height: 1.6 !important;
    }
    
    .about-text p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }
    
    .customers-section {
        padding: 40px 15px !important;
    }
    
    .section-title {
        font-size: clamp(24px, 8vw, 32px) !important;
        margin-bottom: 25px !important;
    }
    
    .customers-text {
        padding: 0 5px !important;
    }
    
    .customers-text p {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        line-height: 1.6 !important;
    }
    
    
    
    
    
}

/* =========================== */
/* IMPROVED MOBILE MENU PREVENT SCROLL FIX */
/* =========================== */

/* Prevent body scroll when mobile menu is open - WITHOUT POSITION FIXED */
body.mobile-menu-open {
    overflow: hidden;
    /* Removed position: fixed to prevent scroll to top */
}

/* Mobile menu slide animations - ENHANCED MODERN STYLE */
@keyframes mobileMenuSlideInFromRight {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.9);
        filter: blur(2px);
    }
    50% {
        opacity: 0.7;
        transform: translateX(10px) scale(0.95);
        filter: blur(1px);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes mobileMenuSlideOutToRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.9);
        filter: blur(2px);
    }
}

@keyframes cyberGlow {
    0%, 100% { 
        opacity: 0;
        transform: none;
    }
    50% { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* COMMENTED OUT - REPLACED WITH NEW BOUNCE ANIMATION ABOVE
/* .mobile-nav-link {
/*     opacity: 0;
/*     transform: translateX(40px) scale(0.9);
/*     animation: mobileMenuSlideInFromRight 0.6s cubic-bezier(0.23, 1, 0.320, 1) forwards;
/* }
/* 
/* .mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { 
/*     animation-delay: 0.1s; 
/* }
/* .mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { 
/*     animation-delay: 0.2s; 
/* }
/* .mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { 
/*     animation-delay: 0.3s; 
/* }
/* .mobile-menu-overlay.active .mobile-nav-link:nth-child(4) { 
/*     animation-delay: 0.4s; 
/* }
*/

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced hover effects for interactive elements */
.nav-links a,
.social-icon,
.read-more-btn,
.more-videos-btn,
.skill-btn,
.submit-btn {
    position: relative;
    overflow: hidden;
}

/* Enhanced transitions */
* {
    transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-1);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary-hover);
}

/* Touch device optimizations - Enhanced mobile blocker */
@media (hover: none) and (pointer: coarse) {
    .video-thumbnail:hover,
    .project-card:hover,
    .skill-btn:hover {
        transform: none;
    }
    
    /* Disable all 3D effects and transforms for project cards on mobile */
    .project-card-wrapper:hover,
    .project-card-wrapper.active,
    .project-card:hover,
    .project-card.active {
        transform: none !important;
    }
    
    .project-card-wrapper:hover::before,
    .project-card-wrapper.active::before {
        filter: none !important;
        transform: none !important;
    }
    
    .project-card-shine,
    .project-card-glare {
        opacity: 0 !important;
    }
    
    .project-card:hover .project-card-image,
    .project-card:hover img {
        transform: none !important;
    }
    /* Mobile: fully disable 3D glow overlays on project cards */
    .project-card::before,
    .project-card:hover::before,
    .project-card.active::before {
        opacity: 0 !important;
        background: none !important;
        background-image: none !important;
        transition: none !important;
    }

    /* Extra hardening for shine and glare layers */
    .project-card-shine,

    /* Fully disable wrapper radial-glow on mobile (prevents long-press hover glitch) */
    .project-card-wrapper,
    .project-card-wrapper:hover,
    .project-card-wrapper.active {
        --card-opacity: 0 !important;
    }

    .project-card-wrapper::before,
    .project-card-wrapper:hover::before,
    .project-card-wrapper.active::before {
        content: none !important;
        opacity: 0 !important;
        background: none !important;
        background-image: none !important;
        filter: none !important;
        transform: none !important;
    }

    /* Remove any residual dynamic shadow that might look like glow */
    .project-card {
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Ensure shine/glare layers cannot blend light on mobile */
    .project-card-shine,
    .project-card-glare {
        mix-blend-mode: normal !important;
    }

    .project-card-glare {
        background: none !important;
        background-image: none !important;
        filter: none !important;
    }

    /* Prevent subtle content shifts tied to pointer vars */
    .project-card .project-info {
        transform: none !important;
    }

    
    .video-thumbnail:active {
        transform: scale(0.98);
    }
    
    .project-card:active {
        transform: translateY(-4px);
    }
}

.project-card.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.project-card.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.skill-btn.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.skill-btn.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================== */
/* FIXED MOBILE UNIVERSITY LOGO - PREVENT GRAY BOX */
/* =========================== */

/* Universal fix to prevent placeholder background on all image elements */
.university-logo img,
.customer-placeholder img {
    background: none !important;
    border: none !important;
}

/* Ensure placeholder divs are hidden when real images load */
.university-logo-container img[src]:not([src=""]) + .placeholder-image,
.customer-logo-link img[src]:not([src=""]) + .placeholder-image {
    display: none !important;
}

/* Ensure image containers have no background when images are present */
.university-logo-container:has(img[src]:not([src=""])),
.customer-logo-link:has(img[src]:not([src=""])) {
    background: none !important;
}

/* University Logo - prevent gray box completely */
.university-logo {
    background: none !important;
    border: none !important;
}

.university-logo-container {
    background: none !important;
}

/* Customer Logo - prevent gray box completely */
.customer-placeholder {
    background: none !important;
    border: none !important;
}

.customer-logo-link {
    background: none !important;
}

.customer-item {
    background: none !important;
}

/* About placeholder image - keep existing styles but ensure no gray borders on mobile */
@media (max-width: 900px) {
    .about-placeholder {
        background: var(--gradient-secondary) !important;
        border: 1px solid var(--border-light) !important;
    }
    
    /* But remove gray background from logo containers */
    .university-logo,
    .university-logo-container {
        background: none !important;
        border: none !important;
    }
}

    /*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                LIKE SYSTEM                          ███
       ███              INTERAKTIVE ELEMENTE                   ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* =========================== */
/* LIKE SYSTEM ENHANCEMENTS */
/* =========================== */

/* Animation für Like Button Klick */
.like-btn.clicked {
    animation: likeRipple 0.6s ease-out;
}

@keyframes likeRipple {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--green-alpha-70);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px var(--green-transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--green-transparent);
    }
}

/* Toast Notifications für Like Feedback */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 12px var(--black-alpha-15);
    transition: all 0.3s ease;
}

.toast-success {
    background: var(--brand-success);
    color: var(--brand-white);
}

.toast-error {
    background: var(--brand-error);
    color: var(--brand-white);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* PLACEHOLDER TEXT VERSTECKEN */
.project-placeholder span {
    display: none !important;
}

/* Alternative: Komplett transparenter Text */
.project-placeholder {
    color: transparent !important;
    font-size: 0 !important;
}

/*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███                    Video                            ███
       ███                    Player                           ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* Tablet Responsive adjustments (769px - 900px) - 50% smaller */
@media (min-width: 769px) and (max-width: 900px) {
    
    .play-video-btn {
        padding: clamp(10px, 2.2vw, 14px) clamp(16px, 3.2vw, 22px);
        font-size: clamp(12px, 2.8vw, 16px);
        border-radius: clamp(16px, 3.5vw, 24px);
        max-width: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, 1.5vw, 8px);
    }
    
    .play-text {
        display: inline;
        font-size: clamp(12px, 2.8vw, 16px);
    }
    
}

/* Large screens optimization (901px+) - 50% smaller */
@media (min-width: 901px) {
        .play-video-btn {
        padding: clamp(12px, 1.8vw, 16px) clamp(20px, 2.8vw, 28px);
        font-size: clamp(14px, 1.2vw, 16px);
        border-radius: clamp(20px, 2.5vw, 30px);
        max-width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(6px, 1vw, 10px);
    }
    
    .play-text {
        display: inline;
        font-size: clamp(14px, 1.2vw, 16px);
    }

/* Force single-scroll mobile modal: media first, then text/buttons in one scrollable column */
@media (max-width: 768px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .project-modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow: hidden !important;
  }
  .project-modal-main {
    display: block !important;
    flex: 1 1 auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .project-modal-content-mobile {
    display: block !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 18px !important;
  }
  .project-modal-media,
  .project-modal-info {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .project-modal-media {
    border-right: none !important;
    border-bottom: 1px solid var(--white-alpha-10) !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }
}


/* Touch-device overrides to ensure mobile popup layout also on large touch screens (iPad etc.) */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .project-modal-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  .project-modal-content-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
    padding: 18px;
  }
  .project-modal-media {
    border: none;
    padding: 0;
    overflow: visible;
    max-height: none;
    flex-shrink: 0;
    border-bottom: 1px solid var(--white-alpha-10);
  }
  .project-modal-info {
    padding: 0;
    max-height: none;
    overflow: visible;
    font-size: 13px;
    flex-shrink: 0;
  }
}

/* Widen mobile breakpoint for tablets */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .project-modal-content { max-height: 92vh; }
}


/* === Overrides to match original mobile popup layout (keep desktop as backup) === */
@media (min-width: 769px) {
  .project-modal-content-mobile { display: contents; }
}
@media (max-width: 768px) and (orientation: portrait) {
  .project-modal-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  .project-modal-content-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
    padding: 18px;
  }
  .project-modal-media {
    border: none;
    padding: 0;
    overflow: visible;
    max-height: none;
    flex-shrink: 0;
  }
  .project-modal-info {
    padding: 0;
    max-height: none;
    overflow: visible;
    font-size: 13px;
    flex-shrink: 0;
  }
}

/* Center alignment fixes for Student Work (title and More Videos button) */
.student-work .video-title { text-align: center; }
.more-videos-controls { display: flex; justify-content: center; }


/* JS-assisted mobile layout toggle by browser width */
.project-modal.mobile-layout .project-modal-content {
  display: block !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
.project-modal.mobile-layout .project-modal-main {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
.project-modal.mobile-layout .project-modal-content-mobile {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.project-modal.mobile-layout .project-modal-media,
.project-modal.mobile-layout .project-modal-info {
  max-height: none !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.project-modal.mobile-layout .project-modal-media {
  border-right: none !important;
  border-bottom: 1px solid var(--white-alpha-10) !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}


/* MOBILE PROJECT MODAL ACTION BUTTONS: smaller download and fullscreen buttons */
@media (max-width: 768px) {
  .modal-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .modal-action-btn img {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* MOBILE PROJECT MODAL GALLERY: Better mobile slider layout */
  .project-modal-gallery {
    gap: 10px !important;
    padding: 0 5px;
    scroll-snap-type: y proximity;
  }
  .project-modal-gallery .gallery-item {
    scroll-snap-align: start;
  }
  
  .gallery-item {
    min-height: 200px;
    border-radius: 6px;
  }
  
  .gallery-item:hover {
    transform: scale(1.01); /* Reduce hover scale for mobile */
  }
}

/* VERY SMALL MOBILE SCREENS: Single column video grid */
@media (max-width: 400px) {
  .video-grid {
    grid-template-columns: 1fr !important; /* Single column for very small screens */
    gap: 10px;
    padding: 0 8px; /* Increased padding for better single column spacing */
    max-width: 280px; /* Constrain width for single column */
    margin: 0 auto; /* Center the single column */
  }
  
  .video-thumbnail {
    max-width: 100%;
    margin: 0 auto;
  }
  
  .thumbnail-title {
    font-size: 11px !important;
  }
  
  .thumbnail-category {
    font-size: 8px !important;
  }
  
  /* Also adjust video gallery padding for very small screens */
  .video-gallery {
    padding: 10px !important;
  }
}


/* FINAL MOBILE MODAL LAYOUT: single scroll area on the modal content */
@media (max-width: 768px) and (orientation: portrait) {
  .project-modal .project-modal-content {
    display: block !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .project-modal .project-modal-main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .project-modal .project-modal-content-mobile {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 18px !important;
  }
  .project-modal .project-modal-media,
  .project-modal .project-modal-info {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .project-modal .project-modal-media {
    border-right: none !important;
    border-bottom: 1px solid var(--white-alpha-10) !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }
}
}

/* =========================
   REAL-TIME SYNC ANIMATION INDICATORS
   ========================= */

/* Sync indicator for remote like animations */
.like-btn.synced-animation {
    position: relative;
    animation: syncPulse 0.8s ease-out;
}

.like-btn.synced-animation::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--brand-primary);
    border-radius: 25px;
    opacity: 0;
    animation: syncBorderPulse 0.8s ease-out;
}

/* Sync pulse animation */
@keyframes syncPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--green-alpha-40);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px var(--green-alpha-20);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 20px var(--green-transparent);
    }
}

/* Border pulse animation */
@keyframes syncBorderPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* Small sync indicator dot */
.like-count.synced {
    position: relative;
}

.like-count.synced::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -8px;
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
    border-radius: 8px;
    opacity: 0;
    animation: syncDot 1s ease-out;
}

@keyframes syncDot {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* =========================
   LIKE BUTTON PARTICLE ANIMATION
   ========================= */
/* Particle container */
.like-particles-container {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual particle styles */
.like-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    animation: particleFloat 1.5s ease-out forwards;
}

/* Three different red tones */
.like-particle.red-1 {
    background: var(--brand-error);
    box-shadow: 0 0 8px var(--brand-error);
}

.like-particle.red-2 {
    background: var(--brand-error-dark);
    box-shadow: 0 0 8px var(--brand-error-dark);
}

.like-particle.red-3 {
    background: var(--brand-error-lightest);
    box-shadow: 0 0 8px var(--brand-error-lightest);
}

/* Different particle sizes for variety */
.like-particle.size-small {
    width: 6px;
    height: 6px;
}

.like-particle.size-medium {
    width: 8px;
    height: 8px;
}

.like-particle.size-large {
    width: 10px;
    height: 10px;
}

/* Particle animation keyframes */
@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-15px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.3);
    }
}

/* Different particle direction animations */
.like-particle.direction-1 {
    animation: particleFloat1 1.5s ease-out forwards;
}

.like-particle.direction-2 {
    animation: particleFloat2 1.5s ease-out forwards;
}

.like-particle.direction-3 {
    animation: particleFloat3 1.5s ease-out forwards;
}

.like-particle.direction-4 {
    animation: particleFloat4 1.5s ease-out forwards;
}

@keyframes particleFloat1 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(-20px, -20px) scale(1) rotate(90deg);
    }
    100% {
        opacity: 0;
        transform: translate(-40px, -80px) scale(0.2) rotate(180deg);
    }
}

@keyframes particleFloat2 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(20px, -15px) scale(1) rotate(-90deg);
    }
    100% {
        opacity: 0;
        transform: translate(35px, -70px) scale(0.2) rotate(-180deg);
    }
}

@keyframes particleFloat3 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(-10px, -25px) scale(1) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: translate(-25px, -90px) scale(0.3) rotate(135deg);
    }
}

@keyframes particleFloat4 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(15px, -30px) scale(1) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translate(30px, -95px) scale(0.2) rotate(-135deg);
    }
}
/*
    //
    // =============================================================
       ███████████████████████████████████████████████████████████
       ███                                                     ███
       ███              SCROLL ANIMATIONEN                     ███
       ███            MORPH BEIM SCROLLEN                      ███
       ███                                                     ███
       ███████████████████████████████████████████████████████████
       ============================================================= //
    //
    //
    */

/* =========================== */
/* SCROLL MORPH ANIMATIONEN */
/* =========================== */

/* Basis-Klassen für Scroll-Animationen */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Verschiedene Animationsstile */
.scroll-animate-fade {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-animate-fade.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-animate-slide {
    opacity: 0;
    transform: translateY(60px) scale(0.85);
    transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.scroll-animate-slide.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-animate-morph {
    opacity: 0;
    transform: translateY(80px) scale(0.7) rotateX(15deg);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: center bottom;
}

.scroll-animate-morph.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}

/* Gestaffelte Animationen für mehrere Elemente */
.scroll-animate[data-delay="0"] { transition-delay: 0s; }
.scroll-animate[data-delay="1"] { transition-delay: 0.1s; }
.scroll-animate[data-delay="2"] { transition-delay: 0.2s; }
.scroll-animate[data-delay="3"] { transition-delay: 0.3s; }
.scroll-animate[data-delay="4"] { transition-delay: 0.4s; }
.scroll-animate[data-delay="5"] { transition-delay: 0.5s; }
.scroll-animate[data-delay="6"] { transition-delay: 0.6s; }

/* Spezielle Animationen für Projekt-Karten */
/* merged into single definition above */

/* Story Section Animation */
.story-section.scroll-animate {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.story-section.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Projects Section Animation */
.projects-section.scroll-animate {
    opacity: 0;
    transform: translateY(70px) scale(0.9);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.projects-section.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Student Work Section Animation */
.student-work.scroll-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.88);
    transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.student-work.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Individueller Content innerhalb der Sektionen */
.story-content.scroll-animate,
.story-info.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-content.scroll-animate.animate-visible,
.story-info.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.projects-title.scroll-animate {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.projects-title.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.projects-description.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.projects-description.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Video Controls Animation */
.video-controls.scroll-animate,
.more-videos-controls.scroll-animate {
    opacity: 0;
    transform: translateY(25px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-controls.scroll-animate.animate-visible,
.more-videos-controls.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Main Video Section Animation */
.main-video-section.scroll-animate {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-video-section.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Student Title Animation */
.student-title.scroll-animate {
    opacity: 0;
    transform: translateY(50px) scale(0.85);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.student-title.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Video Gallery Animation */
.video-gallery.scroll-animate {
    opacity: 0;
    transform: translateY(35px) scale(0.93);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-gallery.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* About Page Animationen */
.about-content.scroll-animate {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.about-content.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.customers-section.scroll-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.88);
    transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.customers-section.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.customer-item.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.85) rotateY(10deg);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.customer-item.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
}

/* Mobile optimierte Animationen */
@media (max-width: 768px) {
    .scroll-animate {
        transform: translateY(30px) scale(0.9);
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .scroll-animate-morph {
        transform: translateY(40px) scale(0.85);
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    /* merged into single definition above */
}

/* Performance-Optimierungen */
.scroll-animate,
.scroll-animate-fade,
.scroll-animate-slide,
.scroll-animate-morph {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Reduzierte Bewegung für Nutzer mit motion-Präferenzen */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate-fade,
    .scroll-animate-slide,
    .scroll-animate-morph {
        transition: opacity 0.3s ease;
        transform: none;
    }
    
    .scroll-animate.animate-visible,
    .scroll-animate-fade.animate-visible,
    .scroll-animate-slide.animate-visible,
    .scroll-animate-morph.animate-visible {
        transform: none;
    }
}

/* ========================================
   SCROLL ANIMATIONS - ADVANCED SCROLL-TRIGGERED ANIMATIONS
   ======================================== */

/* Base animation states - elements start hidden and transition in */
.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure fixed header and language toggle are unaffected by any ancestor transforms */
.header, .language-toggle {
    transform: none !important;
    will-change: opacity;
}

/* Different animation types */
.scroll-animate.fade-in {
    opacity: 0;
    transform: none;
}

.scroll-animate.fade-in.animate-in {
    opacity: 1;
}

.scroll-animate.slide-up {
    opacity: 0;
    transform: translateY(80px);
}

.scroll-animate.slide-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate.slide-down {
    opacity: 0;
    transform: translateY(-60px);
}

.scroll-animate.slide-down.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate.slide-left {
    opacity: 0;
    transform: translateX(60px);
}

.scroll-animate.slide-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate.slide-right {
    opacity: 0;
    transform: translateX(-60px);
}

.scroll-animate.slide-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate.scale-in {
    opacity: 0;
    transform: scale(0.8);
}

.scroll-animate.scale-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

.scroll-animate.rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
}

.scroll-animate.rotate-in.animate-in {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Progressive animation delays for staggered effects */
.scroll-animate.delay-100 {
    transition-delay: 0.1s;
}

.scroll-animate.delay-200 {
    transition-delay: 0.2s;
}

.scroll-animate.delay-300 {
    transition-delay: 0.3s;
}

.scroll-animate.delay-400 {
    transition-delay: 0.4s;
}

.scroll-animate.delay-500 {
    transition-delay: 0.5s;
}

.scroll-animate.delay-600 {
    transition-delay: 0.6s;
}
.scroll-animate.delay-700 {
    transition-delay: 0.7s;
}

.scroll-animate.delay-800 {
    transition-delay: 0.8s;
}

.scroll-animate.delay-900 {
    transition-delay: 0.9s;
}

.scroll-animate.delay-1000 {
    transition-delay: 1.0s;
}

.scroll-animate.delay-1100 {
    transition-delay: 1.1s;
}

.scroll-animate.delay-1200 {
    transition-delay: 1.2s;
}

/* Special hero title animation */
.hero-title.scroll-animate {
    opacity: 0;
    transform: translateY(100px) scale(0.9);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-title.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-subtitle.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.3s;
}

.hero-subtitle.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Project cards special animation (normalized to single definition) */
.project-card-wrapper.scroll-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card-wrapper.scroll-animate.animate-in,
.project-card-wrapper.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth scroll behavior for all elements */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        transition: none !important;
        animation: none !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}


/* --- Smooth hover fix for Student Work control buttons --- */
/* This block is placed at the end to override earlier .scroll-animate transitions */
.video-controls .control-btn {
  /* Create its own compositor layer for smoother animations */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, background-color, color, box-shadow, border-color;
  contain: paint;

  /* Keep opacity transition for fade-in, but make hover interactions snappy */
  transition:
    opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease;
}

.video-controls .control-btn:hover {
  /* Composite-only movement to avoid layout & paint thrash */
  transform: translateY(-2px) translateZ(0);
}

.video-controls .control-btn:active {
  transform: translateY(-1px) translateZ(0);
}

.video-controls .control-btn .arrow-icon {
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.video-controls .control-btn.next-btn:hover .arrow-icon {
  transform: translateX(2px);
}

.video-controls .control-btn.prev-btn:hover .arrow-icon {
  transform: translateX(-2px);
}

/* Ensure disabled state stays snappy but without hover effects */
.video-controls .control-btn:disabled,
.video-controls .control-btn:disabled:hover {
  transition:
    opacity 200ms ease,
    background-color 0ms,
    color 0ms,
    border-color 0ms,
    box-shadow 0ms,
    transform 0ms;
  transform: none;
  box-shadow: none;
}

/* Prefer reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .video-gallery {
    transition: none !important;
    transform: none !important;
  }
}


/* Student Work Video Gallery - smooth open/close (condensed) */
.video-gallery {
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, transform, max-height, padding;
  transition: opacity 320ms ease, transform 320ms ease, max-height 320ms ease, padding 320ms ease;
}

.video-gallery.show {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  max-height: 2000px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  pointer-events: auto;
}

.video-gallery:not(.show) {
  display: block !important;
  opacity: 0 !important;
  transform: translateY(30px) scale(0.93) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

/* Neutralize inline display:none to allow transitions */
.video-gallery[style*="display: none"],
.video-gallery[style*="display:none"] {
  display: block !important;
}


/* Visibility handling to avoid first-open-only issue and ensure repeated cycles work */
.video-gallery:not(.show) {
  visibility: hidden !important;
}
.video-gallery.show,
.video-gallery.scroll-animate.show {
  visibility: visible !important;
}

/* If JS sets inline display:none for close, force hidden state but keep display block for transitions */
.video-gallery[style*="display: none"] {
  display: block !important;
  opacity: 0 !important;
  transform: translateY(30px) scale(0.93) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}