/* Layout CSS - LinkedIn Service Website */

/* Reset styles moved to fonts.css per rule 032 */

/* Layout Container */
.layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* Header Layout - Professional Dark Style */
/* Black background with logo colors: #17daff (Blue), #ffd700 (Gold) */
.layout-header {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 100;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(23, 218, 255, 0.15),
        0 0 40px rgba(255, 215, 0, 0.08);
    transition: all 0.3s ease;
    height: 116px;
}

.layout-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    height: 116px;
    position: relative;
}

.logo-container {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.navigation-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.language-flags {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Main Content - Professional Dark Style */
.layout-main {
    flex: 1;
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
    background: var(--color-background-primary);
    position: relative;
}

/* Subtle background gradient for depth - Professional Dark Style */
/* Logo colors: Deep Black, Logo Blue (#17daff), Gold - NO green */
.layout-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(23, 218, 255, 0.12) 0%, transparent 70%),
        radial-gradient(circle at 80% 70%, rgba(23, 218, 255, 0.10) 0%, transparent 68%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.10) 0%, transparent 60%),
        radial-gradient(circle at 10% 50%, rgba(23, 218, 255, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 90% 40%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.layout-main > * {
    position: relative;
    z-index: 1;
}

/* Footer Layout - Professional Dark Style */
/* Black background with logo colors: #17daff (Blue), #ffd700 (Gold) */
.layout-footer {
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    margin-top: auto;
    box-shadow: 
        0 -4px 12px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(23, 218, 255, 0.10),
        0 0 40px rgba(255, 215, 0, 0.06);
}

.layout-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

/* Responsive Design - 4 Breakpoints */
/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    .layout-container {
        padding: 0 0.5rem;
    }
    
    .layout-header-content {
        padding: 0.75rem;
    }
    
    .layout-main {
        padding: 0.75rem 0;
    }
    
    .layout-footer-content {
        padding: 0 0.5rem;
    }
}

/* Tablet/iPad (600px–768px) */
@media (min-width: 600px) and (max-width: 768px) {
    .layout-container {
        padding: 0 1rem;
    }
    
    .layout-header-content {
        padding: 1rem;
    }
    
    .layout-main {
        padding: 1rem 0;
    }
    
    .layout-footer-content {
        padding: 0 1rem;
    }
}

/* Kleiner Desktop/13-Zoll (1024px–1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .layout-container {
        padding: 0 1.5rem;
    }
    
    .layout-header-content {
        padding: 1rem 1.5rem;
    }
    
    .layout-footer-content {
        padding: 0 1.5rem;
    }
}

/* Großer Desktop/Widescreen (min-width: 1440px) */
@media (min-width: 1440px) {
    .layout-container {
        padding: 0 2rem;
    }
    
    .layout-header-content {
        padding: 1.5rem 2rem;
    }
    
    .layout-footer-content {
        padding: 0 2rem;
    }
}