/* Responsive design breakpoints for Duller Partner website */

/* CSS Custom Properties - default values and mobile breakpoints */
:root {
    --content-left-margin: 330px;
    --content-right-margin: 40px;
}

/* CSS Custom Properties for mobile breakpoints - ensure competency-section positioning works */
@media (max-width: 480px) {
    :root {
        --content-left-margin: 150px !important; /* Force override with !important */
        --content-right-margin: 14px !important; /* Force override with !important */
    }
}

@media (max-width: 768px) {
    :root {
        --content-left-margin: 150px;
        --content-right-margin: 40px;
    }
}

@media (max-width: 1024px) {
    :root {
        --content-left-margin: 200px;
        --content-right-margin: 40px;
    }
}

@media (max-width: 1280px) {
    :root {
        --content-left-margin: 250px;
        --content-right-margin: 40px;
    }
}

/* Large Desktop */
@media (min-width: 1440px) {
    .scroll-container {
        /* Backgrounds extend full width */
        width: 100vw;
    }
    
    .main-nav {
        left: 71px;
        width: 1327px;
    }
    
    /* Footer positioning handled by main.css */
}

/* Desktop - Only apply to screens 1024px and below */
@media (max-width: 1024px) {
    .hero-image-1 {
        left: -800px;
        width: 1400px;
    }
    
    .hero-image-2 {
        left: -200px;
        width: 2800px;
    }
    
    .hero-image-3 {
        width: 1200px;
    }
    
    .hero-image-4 {
        left: -150px;
        width: 1700px;
    }
    
    .main-nav {
        left: 50px;
        width: 1200px;
    }
    
    /* Footer positioning handled by main.css */
    
    /* Responsive service item positioning for tablets */
    #services .service-item {
        grid-template-columns: 200px 300px 100px 1fr; /* left margin, name column, gap, arrow column */
    }

    /* Section 5 responsive adjustments for tablets */
    #uber-uns .uber-uns-content {
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        gap: 40px;
    }
    
    #uber-uns .uber-uns-left {
        max-width: 65%;
    }
    
    #uber-uns .uber-uns-buttons {
        right: 60px;
    }
    
    /* Only adjust hero images and navigation, NOT content positioning */
    /* Remove the conflicting .main-content-area rules that were causing headline issues */
}

/* Tablet - Only apply to screens 1024px and below */
@media (max-width: 1024px) {
    
    .scroll-container {
        /* Backgrounds extend full width on mobile */
        width: 100vw;
    }
    
    .hero-content {
        padding: 1rem;
        /* Removed max-width constraint to allow full width usage */
    }
    
    .logo-text {
        font-size: 2rem;
    }
    
    .hero-tagline h1 {
        font-size: 1.5rem;
    }
    
    .hero-tagline p {
        font-size: 1rem;
    }
    
    .kompetenzen-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
    
    .about-content {
        flex-direction: column;
    }
    
    .about-info {
        margin-bottom: 2rem;
    }
    
    /* Responsive service item positioning */
    #services .service-item {
        grid-template-columns: 80px 220px 60px 1fr; /* left margin, name column, gap, arrow column */
    }

    /* Section 5 responsive adjustments */
    #uber-uns .uber-uns-content {
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        gap: 30px;
    }
    
    #uber-uns .uber-uns-left {
        max-width: 60%;
    }
    
    #uber-uns .uber-uns-right {
        gap: 50px;
    }
    
    #uber-uns .uber-uns-buttons {
        right: 40px;
    }
    
    .main-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-menu {
        flex-direction: column;
    }
    
    .nav-menu a {
        padding: 0.5rem 1rem;
    }
    
    .footer-content {
        padding: 0 1rem;
    }
    
    /* Competencies section mobile adjustments */
    .main-content-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        top: 200px;
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        /* Use fixed positioning to break out of section flexbox centering */
        position: fixed !important;
        z-index: 9999 !important;
    }
    
    /* Use fixed positioning to break out of section flexbox centering */
    .competency-section {
        position: fixed !important;
        left: var(--content-left-margin) !important;
        top: 300px !important;
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)) !important;
        z-index: 9999 !important;
    }
    
    .left-content {
        width: 100%;
        max-width: 400px;
    }
    
    .right-content {
        max-width: 100%;
    }
    
    .competency-section {
        top: 300px;
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        /* Use fixed positioning to break out of section flexbox centering */
        position: fixed !important;
        z-index: 9999 !important;
    }
    
    .competency-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 100%;
    }
    
    .competency-item {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .main-title {
        font-size: 32px;
        margin-bottom: 24px;
        /* Ensure 2-line layout */
        line-height: 1.1;
        color: #ffffff !important; /* Ensure white text is visible */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Force opacity */
    }
    
    .main-text {
        color: #ffffff !important; /* Ensure white text is visible */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Force opacity */
        font-size: 16px; /* Ensure readable size on mobile */
        line-height: 1.4; /* Better line height for mobile */
    }
    
    .kompetenzen-header {
        padding: 15px 20px 15px 15px;
        width: 100vw;
        min-width: 100vw;
        overflow: visible;
    }
    
    .header-logo {
        height: 22px;
        width: 29px;
    }
    
    .header-logotype {
        height: 22px;
        width: auto;
    }
    
    .left-sidebar {
        width: 50px;
        left: 20px; /* Adjusted for mobile but backgrounds still full width */
    }
    
    .navigation-component {
        left: 0; /* Align to left-sidebar edge */
        top: 80px;
    }
    
    .nav-text-frame {
        gap: 50px;
        width: 14px;
    }
    
    .nav-item {
        font-size: 12px;
    }
    
    .indicator-line {
        height: 70px;
        width: 3px;
    }
    
    /* Adjust sticky header for mobile */
    .sticky-header {
        padding: 30px 20px 30px 20px; /* Adjusted for mobile but backgrounds still full width */
    }
    
    /* Adjust language switcher for mobile */
    .language-switcher {
        left: 0; /* Align to left-sidebar edge */
    }
}



/* Medium mobile devices and tablets */
@media (max-width: 1024px) {
    /* Section 1 (Hero) Medium Mobile Styles */
    .landing-foreground .duller-logo {
        top: 40vh;
        width: 50vw;
    }
    
    .landing-foreground .engineering-evolution {
        position: fixed;
        left: 28px; /* Consistent with small mobile */
        bottom: 60px; /* Consistent with small mobile */
        transform: rotate(270deg) translateZ(0);
    }
    
    .landing-foreground .engineering-evolution h1 {
        font-size: 18px;
        letter-spacing: 2.5px;
    }
    
    .landing-foreground .hero-description {
        width: 50vw;
        top: 55vh;
    }
    
    #hero .scroll-indicator {
        position: fixed;
        left: 48px; /* Consistent with small mobile */
        bottom: 0; /* Consistent with small mobile */
    }
    
    /* Ensure proper mobile spacing and prevent content overflow */
    #hero .section {
        min-height: 100vh;
        overflow: hidden;
    }
    
    .landing-foreground .hero-content {
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: 18vh;
        /* Ensure horizontal centering is maintained */
        align-items: center;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    
    /* Section 1 (Hero) Mobile Styles */
    .landing-foreground .hero-content {
        padding: 0;
        width: 100%;
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: 20vh;
        /* Ensure horizontal centering is maintained */
        align-items: center;
    }
    
    .landing-foreground .duller-logo {
        top: 35vh; /* Move logo higher up */
        width: 80vw; /* Make logo bigger */
    }
    
    .landing-foreground .engineering-evolution {
        position: fixed;
        left: 28px; /* Move further left */
        bottom: 60px; /* Position higher up on mobile */
        transform: rotate(270deg) translateZ(0);
    }
    
    .landing-foreground .engineering-evolution h1 {
        font-size: 16px; /* Smaller text */
        letter-spacing: 2px;
    }
    
    .landing-foreground .hero-description {
        width: 80vw;
        top: 45vh;
    }
    
    #hero .scroll-indicator {
        position: fixed;
        left: 48px; /* Move further left to align with engineering evolution text */
        bottom: 0; /* Position higher up on mobile */
    }
    
    #hero .scroll-line {
        height: 60px; /* Slightly shorter for mobile */
    }
    
    /* Ensure proper mobile spacing and prevent content overflow */
    #hero .section {
        min-height: 100vh;
        overflow: hidden;
    }
    
    /* Other sections mobile styles */
    .hero-content {
        padding: 0.5rem;
        /* Removed max-width constraint to allow full width usage */
    }
    
    .logo-text {
        font-size: 1.5rem;
    }
    
    .hero-tagline h1 {
        font-size: 0.8rem;
        /* Removed max-width constraint to allow full width usage */
    }
    
    .hero-tagline p {
        font-size: 0.7rem;
        /* Removed max-width constraint to allow full width usage */
    }
    
    .scroll-indicator {
        bottom: 20px;
        right: 20px;
    }
    
    .scroll-line {
        height: 40px;
    }
    
    .scroll-arrow {
        width: 3px;
        height: 18px;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .header-lines .line {
        width: 200px;
        height: 3px;
    }
    
    .header-lines .line:last-child {
        width: 250px;
    }
    
    .kompetenzen-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .kompetenz-icon {
        width: 35px;
        height: 35px;
    }
    
    .kompetenz-item h3 {
        font-size: 0.9rem;
    }
    
    .kompetenzen-text {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .kompetenzen-text p {
        font-size: 0.9rem;
    }
    
    .services-text {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .services-text p {
        font-size: 0.8rem;
    }
    
    .case-studies-grid {
        grid-template-columns: repeat(2, 60px);
        gap: 0.5rem;
    }
    
    .case-image {
        width: 60px;
        height: 400px;
    }
    
    .case-study h3 {
        font-size: 0.9rem;
        height: 150px;
    }
    
    .fallstudien-text {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .fallstudien-text p {
        font-size: 0.9rem;
    }
    
    .about-text {
        max-width: 300px;
    }
    
    .about-text p {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 1rem;
        gap: 0.8rem;
    }
    
    .btn-arrow {
        width: 20px;
        height: 10px;
    }
    
    .company-details h3 {
        font-size: 0.9rem;
    }
    
    .company-details p {
        font-size: 0.9rem;
    }
    
    .contact-info p {
        font-size: 0.9rem;
    }
    
    .main-nav {
        left: 10px;
        width: 600px;
        top: 15px;
    }
    
    /* Show left sidebar navigation on sections 2+ for main page only */
    body:not(.section-1-colors) .left-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Hide left sidebar navigation on section 1 (hero) */
    body.section-1-colors .left-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide left sidebar navigation on subpages */
    .template-main .left-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Force override JavaScript inline styles for mobile navigation visibility */
    body:not(.section-1-colors) .left-sidebar[style*="opacity: 0"] {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    body.section-1-colors .left-sidebar[style*="opacity: 1"] {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    
    .nav-menu {
        top: 60px;
        gap: 0.8rem;
    }
    
    .nav-menu a {
        font-size: 0.7rem;
    }
    
    .nav-logo {
        top: 600px;
    }
    
    .nav-lang {
        top: 600px;
        font-size: 0.8rem;
    }
    
    /* Footer positioning handled by main.css */
    
    /* Footer positioning handled by main.css */
    
    /* Competencies section small mobile adjustments */
    .main-content-area {
        top: 200px;
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        gap: 30px;
        /* Use fixed positioning to break out of section flexbox centering */
        position: fixed !important;
        z-index: 9999 !important;
    }
    
    .competency-section {
        top: 300px;
        left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
        /* Use fixed positioning to break out of section flexbox centering */
        position: fixed !important;
        z-index: 9999 !important;
    }
    
    .left-sidebar {
        width: 60px; /* Increased from 40px for better text readability */
    }
    
    .navigation-component {
        left: 15px; /* Adjusted from 20px for better centering */
        top: 80px; /* Increased from 60px for better positioning */
    }
    
    .nav-text-frame {
        gap: 60px; /* Increased from 40px for better spacing between nav items */
        width: 16px; /* Increased from 12px for better text width */
    }
    
    .nav-item {
        font-size: 14px; /* Increased from 10px for better readability */
        font-weight: 400;
        line-height: 1.2; /* Added line height for better text spacing */
    }
    
    .nav-separator {
        height: 100% !important; /* Span full navigation height */
        width: 1px !important; /* 1px width as requested */
        background: #FFFFFF !important; /* Ensure white background for visibility */
        top: 0 !important; /* Force override JavaScript inline styles */
        right: 0 !important; /* Force override JavaScript inline styles */
        left: auto !important; /* Force override JavaScript inline styles */
        transform: none !important; /* Force override JavaScript inline styles */
    }
    
    .nav-text {
        font-size: 14px; /* Increased from 10px to match nav-item */
        font-weight: inherit;
    }
    
    .main-title {
        font-size: 20px;
        /* Ensure 2-line layout */
        line-height: 1.1;
        color: #ffffff !important; /* Ensure white text is visible */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Force opacity */
    }
    
    .main-text {
        font-size: 12px;
        color: #ffffff !important; /* Ensure white text is visible */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Force opacity */
        line-height: 1.3; /* Better line height for small mobile */
    }
    
    .competency-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .competency-item {
        gap: 10px;
    }
    
    .competency-icon {
        width: 24px;
        height: 24px;
    }
    
    .competency-icon img {
        width: 24px;
        height: 24px;
    }
    
    .competency-label {
        font-size: 12px;
    }
    
    .kompetenzen-header {
        padding: 10px 40px 10px 15px; /* Consistent right padding to prevent cutoff */
        width: 100vw; /* Ensure full viewport width */
        min-width: 100vw; /* Prevent width reduction */
        overflow: visible; /* Prevent content cutoff */
    }
    
    .header-logo {
        height: 18px;
        width: 24px;
    }
    
    .header-logotype {
        height: 18px;
        width: auto;
    }
    
    /* Footer positioning handled by components.css */
    /* Removed conflicting bottom-tagline positioning */
}

/* Small mobile devices */
@media (max-width: 320px) {
    .logo-text {
        font-size: 1.8rem;
    }
    
    .hero-tagline h1 {
        font-size: 0.8rem;
    }
    
    .hero-tagline p {
        font-size: 0.75rem;
        max-width: 250px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .header-lines .line {
        width: 150px;
    }
    
    .header-lines .line:last-child {
        width: 200px;
    }
    
    .kompetenzen-text {
        max-width: 250px;
    }
    
    .services-text {
        max-width: 250px;
    }
    
    .case-studies-grid {
        grid-template-columns: repeat(2, 50px);
    }
    
    .case-image {
        width: 50px;
        height: 350px;
    }
    
    .case-study h3 {
        font-size: 0.8rem;
        height: 120px;
    }
    
    .fallstudien-text {
        max-width: 180px;
    }
    
    .about-text {
        max-width: 250px;
    }
    
    .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.9rem;
    }
    
    .main-nav {
        width: 500px;
    }
    
    /* Footer positioning handled by main.css */
    
    .kompetenzen-header {
        padding: 8px 40px 8px 10px; /* Consistent right padding to prevent cutoff */
        width: 100vw; /* Ensure full viewport width */
        min-width: 100vw; /* Prevent width reduction */
        overflow: visible; /* Prevent content cutoff */
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .section {
        padding: 0.5rem 0;
    }
    
    .hero-content {
        padding: 0.5rem;
    }
    
    .logo-text {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-tagline h1 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-tagline p {
        font-size: 0.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .kompetenzen-grid {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .services-grid {
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }
    
    .case-studies-grid {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .about-content {
        gap: 1.5rem;
    }
    
    .main-nav {
        top: 15px;
    }
    
    .nav-menu {
        top: 50px;
        gap: 0.8rem;
    }
    
    .nav-logo {
        top: 500px;
    }
    
    .nav-lang {
        top: 500px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .kompetenz-icon,
    .service-arrow,
    .btn-arrow {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .content:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    .service-item:hover {
        transform: none;
    }
    
    .case-study:hover {
        transform: none;
    }
    
    .kompetenz-item:hover {
        transform: none;
    }
    
    /* Increase touch targets */
    .nav-dot {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-menu a {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Print styles */
@media print {
    .scroll-container {
        overflow: visible;
    }
    
    .section {
        height: auto;
        page-break-inside: avoid;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .main-nav,
    .navigation-dots {
        display: none;
    }
    
    .hero-background,
    .kompetenzen-background,
    .services-background,
    .fallstudien-background,
    .about-background {
        display: none;
    }
} 

/* ===== SERVICES SUB-PAGES RESPONSIVE STYLES ===== */

/* Large Desktop - Services sub-pages */
@media (min-width: 1440px) and (max-width: 9999px) {
    .content-container {
        left: calc(45% + 50px);
        width: calc(55% - 70px);
        max-width: 700px;
    }
    
    .header-title {
        font-size: 32px;
    }
    
    .text-paragraph {
        font-size: 16px;
    }
    
    .template-main .sub-nav-container {
        left: 20%;
    }
    
    .breakpoint-indicator::after {
        content: "Large Desktop (≥1440px)";
        color: #4CAF50;
    }
}

/* Medium Desktop - Services sub-pages (1280px and below) */
@media (max-width: 1280px) and (min-width: 1025px) {
    .content-container {
        left: calc(45% + 50px);
        width: calc(55% - 58px);
        max-width: 600px;
    }
    
    .header-title {
        font-size: 30px;
    }
    
    .text-paragraph {
        font-size: 15px;
    }
    
    .template-main .sub-nav-container {
        left: 15%;
    }
    
    .breakpoint-indicator::after {
        content: "Medium Desktop (1025px-1280px)";
        color: #2196F3;
    }
}

/* Desktop - Services sub-pages (1024px and below) */
@media (max-width: 1024px) and (min-width: 769px) {
    .content-container {
        left: calc(45% + 50px);
        width: calc(55% - 70px);
        max-width: 600px;
    }
    
    .header-title {
        font-size: 28px;
    }
    
    .text-paragraph {
        font-size: 15px;
    }
    
    .template-main .sub-nav-container {
        left: 10%;
    }
    
    .breakpoint-indicator::after {
        content: "Desktop (769px-1024px)";
        color: #FF9800;
    }
}

/* Tablet - Services sub-pages */
@media (max-width: 768px) and (min-width: 481px) {
    .content-container {
        left: 42%;
        width: calc(58% - 8px);
        max-width: 500px;
        top: 90px;
    }
    
    .header-title {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .text-paragraph {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .template-main .sub-nav-container {
        left: 2%;
        top: 90px;
        flex-direction: column;
        gap: 8px;
    }
    
    .breakpoint-indicator::after {
        content: "Tablet (481px-768px)";
        color: #9C27B0;
    }
    
    .sub-nav-item {
        font-size: 14px;
    }
    
    .sub-nav-title {
        font-size: 14px;
    }
    
    .next-text {
        font-size: 18px;
    }
    
    .next-arrow {
        width: 24px;
        height: 12px;
    }
}

/* Mobile - Services sub-pages */
@media (max-width: 480px) and (min-width: 321px) {
    /* Enable scrolling on mobile by overriding base overflow hidden */
    body {
        overflow: auto !important;
        height: auto !important;
    }
    
    .template-main {
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Hide main navigation on mobile */
    .left-sidebar {
        display: none;
    }
    
    /* Hide logotype, move logo icon to top right */
    .header-logo-right {
        display: none;
    }
    
    .header-logo-left {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10000;
    }
    
    /* Add language switcher for mobile */
    .template-main .language-switcher {
        position: fixed;
        top: 20px;
        right: 80px;
        color: white;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        z-index: 10000;
    }
    
    /* Background image only covers top 30% but full width */
    .template-main .template-background {
        height: 30vh;
        width: 100vw;
    }
    
    .template-main .template-background .bg-image {
        height: 30vh;
        width: 100%;
    }
    
    .template-main .bg-overlay {
        height: 30vh;
        width: 100%;
    }
    
    /* Add back text link */
    .mobile-back-button {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 10000;
        background: none;
        border: none;
        color: white;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        text-decoration: none;
    }
    
    /* Mobile Layout Structure - More Robust */
    
    /* 1. Sub-nav sticky at top with reduced gaps */
    .template-main .sub-nav-container {
        position: sticky;
        top: 60px;
        left: 5%;
        right: 5%;
        z-index: 9999;
    }
    
    /* Reduce sub-nav item gaps for mobile - Maximum specificity to override base services.css */
    .template-main .sub-nav-container .sub-nav-row-link .sub-nav-item-container {
        gap: 6px !important;
    }
    
    /* Override base sub-nav container gap */
    .template-main .sub-nav-container {
        gap: 4px !important;
    }
    
    /* 2. Content container in document flow for mobile scrolling */
    .template-main .content-container {
        position: relative;
        left: 5%;
        right: 5%;
        width: 90%;
        max-width: none;
        margin-top: calc(30vh + 14px); /* 30% viewport height + 14px */
        margin-bottom: 60px;
    }
    
    /* Footer styles moved to components.css to avoid conflicts */
    
    .breakpoint-indicator::after {
        content: "Mobile (321px-480px)";
        color: #F44336;
    }
    
    /* Mobile Typography - Maximum specificity to override base services.css */
    .template-main .content-container .content-header .header-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        color: #6A6A6A !important;
    }
    
    /* Override content-header margin-bottom for mobile - Maximum specificity */
    body .template-main .content-container .content-header {
        margin-bottom: 16px !important;
    }
    
    /* Alternative override with different approach */
    .template-main .content-container .content-header[style*="margin-bottom"] {
        margin-bottom: 16px !important;
    }
    
    /* Nuclear option - override any possible margin-bottom */
    .template-main .content-container .content-header,
    .template-main .content-container .content-header * {
        margin-bottom: 16px !important;
    }
    
    /* Override main-text-content gap for mobile */
    .template-main .content-container .content-grid .right-column .main-text-content {
        gap: 16px !important;
    }
    
    /* Override content-header height and margin for mobile */
    .template-main .content-container .content-header {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 16px !important;
    }
    
    .template-main .text-paragraph {
        font-size: 14px;
        line-height: 1.6;
        color: #6A6A6A;
        margin-bottom: 8px;
    }
    
    .next-text {
        font-size: 16px;
    }
    
    .next-arrow {
        width: 22px;
        height: 11px;
    }
    
    .next-button {
        gap: 8px;
        margin-top: 12px;
    }
    
    /* SINGLE SCROLL CONTEXT: Only body scrolls */
    html, body {
        overflow: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Disable scrolling on all other containers */
    .template-main, .template-content {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    
    /* Ensure content container doesn't scroll */
    .template-main .content-container {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* PREVENT DUAL SCROLLING: Force single scroll context */
    .template-main .content-container,
    .template-main .content-grid,
    .template-main .right-column,
    .template-main .main-text-content {
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
}

/* Small Mobile - Services sub-pages */
@media (max-width: 320px) {
    /* Enable scrolling on mobile by overriding base overflow hidden */
    body {
        overflow: auto !important;
        height: auto !important;
    }
    
    .template-main {
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Hide main navigation on mobile */
    .left-sidebar {
        display: none;
    }
    
    /* Hide logotype, move logo icon to top right */
    .header-logo-right {
        display: none;
    }
    
    .header-logo-left {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 10000;
    }
    
    /* Add language switcher for small mobile */
    .template-main .language-switcher {
        position: fixed;
        top: 15px;
        right: 70px;
        color: white;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        z-index: 10000;
    }
    
    /* Background image only covers top 30% but full width */
    .template-main .template-background {
        height: 30vh;
        width: 100vw;
    }
    
    .template-main .template-background .bg-image {
        height: 30vh;
        width: 100%;
    }
    
    .template-main .bg-overlay {
        height: 30vh;
        width: 100%;
    }
    
    /* Adjust back text link for smaller screens */
    .mobile-back-button {
        top: 15px;
        left: 15px;
        font-size: 14px;
    }
    
    /* Small Mobile Layout Structure - More Robust */
    
    /* 1. Sub-nav sticky at top with reduced gaps */
    .template-main .sub-nav-container {
        position: sticky;
        top: 60px;
        left: 5%;
        right: 5%;
        z-index: 9999;
    }
    
    /* Reduce sub-nav item gaps for small mobile - Maximum specificity to override base services.css */
    .template-main .sub-nav-container .sub-nav-row-link .sub-nav-item-container {
        gap: 5px !important;
    }
    
    /* Override base sub-nav container gap */
    .template-main .sub-nav-container {
        gap: 3px !important;
    }
    
    .breakpoint-indicator::after {
        content: "Small Mobile (≤320px)";
        color: #E91E63;
    }
    
    /* 2. Content container in document flow for mobile scrolling */
    .template-main .content-container {
        position: relative;
        left: 5%;
        right: 5%;
        width: 90%;
        margin-top: calc(30vh + 14px); /* 30% viewport height + 14px */
        margin-bottom: 50px;
    }
    
    /* Footer styles moved to components.css to avoid conflicts */
    
    /* Small Mobile Typography - Maximum specificity to override base services.css */
    .template-main .content-container .content-header .header-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        color: #6A6A6A !important;
    }
    
    /* Override content-header margin-bottom for small mobile - Maximum specificity */
    body .template-main .content-container .content-header {
        margin-bottom: 12px !important;
    }
    
    /* Alternative override with different approach */
    .template-main .content-container .content-header[style*="margin-bottom"] {
        margin-bottom: 12px !important;
    }
    
    /* Nuclear option - override any possible margin-bottom */
    .template-main .content-container .content-header,
    .template-main .content-header * {
        margin-bottom: 12px !important;
    }
    
    /* Override main-text-content gap for small mobile */
    .template-main .content-container .content-grid .right-column .main-text-content {
        gap: 12px !important;
    }
    
    /* Override content-header height and margin for small mobile */
    .template-main .content-container .content-header {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 12px !important;
    }
    
    .template-main .text-paragraph {
        font-size: 14px;
        line-height: 1.6;
        color: #6A6A6A;
        margin-bottom: 8px;
    }
    
    .next-text {
        font-size: 14px;
    }
    
    .next-arrow {
        width: 20px;
        height: 10px;
    }
    
    .next-button {
        gap: 6px;
        margin-top: 12px;
    }
    
    /* SINGLE SCROLL CONTEXT: Only body scrolls */
    html, body {
        overflow: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* Disable scrolling on all other containers */
    .template-main, .template-content {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    
    /* Ensure content container doesn't scroll */
    .template-main .content-container {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* PREVENT DUAL SCROLLING: Force single scroll context */
    .template-main .content-container,
    .template-main .content-grid,
    .template-main .right-column,
    .template-main .main-text-content {
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
}

/* Mobile sub-nav overrides handled by services.css */ 

/* Services section responsive adjustments - consolidated */
.services-main {
    width: 900px;
    gap: 80px;
}

.services-title {
    font-size: 42px;
    margin-bottom: 50px;
}

.services-content {
    gap: 80px;
}

.services-grid {
    gap: 50px;
}

.service-name {
    font-size: 18px;
}

.service-description {
    font-size: 15px;
} 

/* Large Desktop - Intermediate breakpoint */
@media (min-width: 1025px) and (max-width: 1439px) {
    .hero-image-1 {
        left: -800px;
        width: 1400px;
    }
    
    .hero-image-2 {
        left: -200px;
        width: 2800px;
    }
    
    .hero-image-3 {
        width: 1200px;
    }
    
    .hero-image-4 {
        left: -150px;
        width: 1700px;
    }
    
    .main-nav {
        left: 50px;
        width: 1200px;
    }
    
    /* Footer positioning handled by main.css */
    
    /* CRITICAL: Preserve main CSS positioning for section 2 headline */
    /* This ensures the headline stays on 2 lines for screens wider than 1024px */
    .main-content-area {
        /* Keep the main CSS values */
        left: 280px !important;
        width: calc(100vw - 280px - 40px) !important;
    }
    
    .left-content {
        /* Keep the main CSS values: width: 500px */
        width: 500px !important;
        flex: 0 0 500px !important; /* prevent shrinking */
        min-width: 500px !important;
    }
    
    .competency-section {
        /* Use CSS variables for consistent positioning across breakpoints */
        left: var(--content-left-margin) !important;
        width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)) !important;
    }
    
    /* Backgrounds extend full width */
    .scroll-container {
        width: 100vw;
    }
}

/* Mobile template-main overrides handled by services.css */ 

/* Disable cursor effect on all mobile breakpoints */
@media (max-width: 1024px) {
  /* Hide cursor effect layer on mobile */
  #hero-cursor-layer {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Ensure native cursor is visible on mobile */
  .hero-cursor-active, .hero-cursor-active * {
    cursor: auto !important;
  }
  
  /* Hide cursor elements on mobile */
  .cursor-line,
  .cursor-square {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Main page footer positioning for mobile */
  body:not(.template-main) .main-footer {
    position: absolute !important; /* Change from fixed to absolute for section-based positioning */
    bottom: 14px !important; /* 14px margin from bottom */
    left: 14px !important; /* 14px margin from left */
    right: 14px !important; /* 14px margin from right */
    width: auto !important; /* Let width be determined by margins */
    padding: 14px !important; /* 14px padding inside footer */
    z-index: 9997 !important;
  }
  
  /* Bottom tagline positioning for main page mobile */
  body:not(.template-main) .bottom-tagline {
    position: absolute !important; /* Change from fixed to absolute */
    bottom: 14px !important; /* 14px margin from bottom */
    right: 14px !important; /* 14px margin from right */
    z-index: 9997 !important;
  }
  
  /* Section 2 (Kompetenzen) mobile adjustments */
  #kompetenzen .main-content-area {
    top: 2vh !important; /* Position very high up as requested */
    left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
    width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
    gap: 40px;
    /* Use fixed positioning to break out of section flexbox centering */
    position: fixed !important;
    z-index: 9999 !important;
  }
  
  /* Use fixed positioning to break out of section flexbox centering */
  #kompetenzen .competency-section {
    position: fixed !important;
    left: var(--content-left-margin) !important;
    top: 300px !important;
    width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)) !important;
    z-index: 9999 !important;
  }
  
  /* Adjust white overlay for section 2 mobile */
  #kompetenzen .bg-overlay {
    top: 40% !important; /* Start at 40% to cover 60% of lower half */
    height: 60% !important; /* Cover 60% of the screen */
    background: rgba(235, 235, 235, 0.35) !important; /* Maintain current opacity */
  }
  
  /* Section 2 indicator line mobile adjustments */
  #kompetenzen .indicator-line {
    height: 40px !important; /* Make line shorter on mobile */
    width: 2px !important; /* Slightly thinner for mobile */
    margin: 0 !important; /* Remove any margins */
    gap: 0 !important; /* Remove gap to icon */
  }
  
  /* Section 2 page links mobile adjustments */
  #kompetenzen .competency-label {
    font-size: 16px !important; /* Increase font size for better readability */
    font-weight: 500 !important; /* Add medium weight for better visibility */
    line-height: 1.3 !important; /* Better line height for mobile */
  }
  
  /* Section 2 main navigation mobile adjustments */
  #kompetenzen .navigation-component {
    top: 50% !important; /* Vertically center the navigation */
    transform: translateY(-50%) !important; /* Perfect vertical centering */
    height: 80vh !important; /* Make navigation taller */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center content vertically */
  }
  
  /* Ensure navigation items are properly spaced in taller navigation */
  #kompetenzen .nav-text-frame {
    height: 100% !important; /* Use full height of navigation component */
    justify-content: space-evenly !important; /* Evenly distribute items */
    align-items: center !important; /* Center items horizontally */
  }
  
  /* Section 2 hero content mobile layout - ensure vertical stacking */
  #kompetenzen .main-content-area {
    flex-direction: column !important; /* Force vertical stacking */
    align-items: flex-start !important; /* Left-align content */
    gap: 20px !important; /* Reduce gap for mobile */
    top: 2vh !important; /* Keep high positioning */
    left: var(--content-left-margin); /* Use CSS variable for consistent left alignment */
    width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Use CSS variables */
    /* Use fixed positioning to break out of section flexbox centering */
    position: fixed !important;
    z-index: 9999 !important;
  }
  

}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Double-ensure cursor effect is disabled on small mobile */
  #hero-cursor-layer {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .hero-cursor-active, .hero-cursor-active * {
    cursor: auto !important;
  }
  
  .cursor-line,
  .cursor-square {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Enhanced main page footer positioning for small mobile */
  body:not(.template-main) .main-footer {
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    padding: 14px !important;
    z-index: 9997 !important;
    /* Ensure footer content is properly sized */
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Enhanced bottom tagline positioning for small mobile */
  body:not(.template-main) .bottom-tagline {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    z-index: 9997 !important;
    font-size: 14px !important; /* Smaller font for mobile */
  }
  
  /* Section 2 (Kompetenzen) small mobile adjustments */
  #kompetenzen .main-content-area {
    top: 2vh !important; /* Position very high up as requested */
    left: 20vw !important;
    gap: 12px !important; /* Add gap between left and right content */
    width: 80vw !important; /* Match the max-width constraint */
    display: flex !important; /* Override CSS Grid with Flexbox */
    flex-direction: column !important; /* Force vertical stacking */
    align-items: flex-start !important; /* Left-align content */
    /* Override CSS Grid properties */
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    height: auto !important; /* Remove fixed height */
  }
  
  /* Adjust white overlay for section 2 small mobile */
  #kompetenzen .bg-overlay {
    top: 30% !important; /* Start higher to cover more of the screen */
    height: 70% !important; /* Cover 75% of the screen */
    background: rgba(235, 235, 235, 0.35) !important; /* Maintain current opacity */
  }
  
  /* Section 2 indicator line small mobile adjustments */
  #kompetenzen .indicator-line {
    height: 35px !important; /* Even shorter for small mobile */
    width: 2px !important; /* Slightly thinner for mobile */
    margin: 0 !important; /* Remove any margins */
    gap: 0 !important; /* Remove gap to icon */
  }
  
  /* Section 2 page links small mobile adjustments */
  #kompetenzen .competency-label {
    font-size: 16px !important; /* Increase font size for better readability on small mobile */
    font-weight: 500 !important; /* Add medium weight for better visibility */
    line-height: 1.3 !important; /* Better line height for mobile */
  }
  
  /* Section 2 main navigation small mobile adjustments */
  #kompetenzen .navigation-component {
    top: 50% !important; /* Vertically center the navigation */
    transform: translateY(-50%) !important; /* Perfect vertical centering */
    height: 75vh !important; /* Make navigation taller (slightly smaller for small mobile) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center content vertically */
  }
  
  /* Ensure navigation items are properly spaced in taller navigation */
  #kompetenzen .nav-text-frame {
    height: 100% !important; /* Use full height of navigation component */
    justify-content: space-evenly !important; /* Evenly distribute items */
    align-items: center !important; /* Center items horizontally */
  }
  

  
  /* Ensure left and right content are properly stacked */
  #kompetenzen .left-content,
  #kompetenzen .right-content {
    width: 100% !important; /* Full width for mobile */
    max-width: none !important; /* Remove max-width constraints */
    position: relative !important; /* Ensure proper positioning */
    display: block !important; /* Force block display for stacking */
  }
  
  /* Ensure right content appears below left content */
  #kompetenzen .right-content {
    margin-top: 0 !important; /* Remove any top margin */
    order: 2 !important; /* Force it to appear second */
    display: block !important; /* Ensure it's visible */
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
    width: 100% !important; /* Full width */
    max-width: 80vw !important; /* Match title width constraint */
    margin-left: 0 !important; /* Align with title */
  }
  
  /* Ensure left content appears first */
  #kompetenzen .left-content {
    order: 1 !important; /* Force it to appear first */
  }
  
  /* Force hero text visibility and proper spacing */
  #kompetenzen .main-text {
    color: #ffffff !important; /* Ensure white text is visible */
    font-size: 14px !important; /* Smaller font for small mobile */
    line-height: 1.3 !important; /* Better line height for mobile */
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove padding */
  }
  
  /* Constrain hero title width for small mobile */
  #kompetenzen .main-title {
    max-width: 80vw !important; /* Constrain width to 80% of viewport */
    font-size: 24px !important; /* Smaller font for mobile */
    line-height: 1.2 !important; /* Better line height for mobile readability */
    margin: 0 0 20px 0 !important; /* Bottom margin for spacing */
    padding: 0 !important; /* Remove any padding */
    display: block !important; /* Ensure block display */
  }
  
  /* Ensure main text flows naturally */
  #kompetenzen .main-text {
    margin: 0 0 20px 0 !important; /* Bottom margin for spacing */
    padding: 0 !important;
    display: block !important;
  }
  
  /* Make engineering evolution text white in section 2 on small mobile */
  #kompetenzen .engineering-evolution h1 {
    color: #ffffff !important; /* Force white text color */
    visibility: visible !important; /* Ensure visibility */
    opacity: 1 !important; /* Ensure opacity */
  }
  
  /* Position competency section using CSS variables for consistent left alignment */
  #kompetenzen .competency-section {
    top: 300px !important; /* Keep current top positioning */
    left: var(--content-left-margin) !important; /* Use CSS variable for consistent left alignment */
    width: calc(100vw - var(--content-left-margin) - var(--content-right-margin) - 20px) !important; /* Use CSS variables with small right margin */
    /* CRITICAL: Override section flexbox centering */
    position: absolute !important;
    transform: none !important; /* Remove any transforms that might interfere */
    margin: 0 !important; /* Remove any margins */
  }
  
    /* CRITICAL: Clean mobile-first approach - single container */
  @media (max-width: 480px) {
    /* Single mobile container for all content - simplified structure */
    #kompetenzen .main-content-area {
      position: fixed !important;
      left: var(--content-left-margin) !important;
      top: 9vh !important;
      width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)) !important;
      /* Clean, simple layout */
      display: block !important;
      height: auto !important;
      z-index: 9999 !important;
    }
    
    /* Remove left/right content containers - direct content flow */
    #kompetenzen .left-content,
    #kompetenzen .right-content {
      display: inline !important; /* Inline flow instead of block containers */
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* Make competency-section part of the main content flow */
    #kompetenzen .competency-section {
      position: relative !important; /* Relative to main container */
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      margin-top: 30px !important; /* Natural spacing */
      z-index: 2 !important; /* Above background, below main content */
      /* Ensure visibility */
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
    }
    
    /* Ensure background overlay covers the full content area */
    #kompetenzen .bg-overlay {
      height: 100vh !important; /* Full viewport height */
      top: 0 !important; /* Start from top */
      z-index: 1 !important; /* Behind content */
      opacity: 1 !important; /* Ensure visibility */
      visibility: visible !important; /* Ensure visibility */
    }
    
    /* Ensure background video/image is visible */
    #kompetenzen .kompetenzen-background {
      height: 100vh !important;
      width: 100vw !important;
      z-index: 0 !important; /* Behind overlay */
    }
    
    #kompetenzen .kompetenzen-background .bg-image {
      height: 100vh !important;
      width: 100% !important;
      object-fit: cover !important;
    }
  }
  
  /* Adjust competency grid for left-aligned placement */
  #kompetenzen .competency-grid {
    grid-template-columns: 1fr !important; /* Single column for mobile */
    gap: 15px !important; /* Reduce gap for compact layout */
    justify-items: start !important; /* Left-align grid items to match positioning */
  }
  
  /* Adjust competency items for left-aligned placement */
  #kompetenzen .competency-item {
    gap: 8px !important; /* Reduce gap between icon and text */
    justify-content: flex-start !important; /* Left-align item content to match positioning */
    text-align: left !important; /* Left-align text to match positioning */
  }
}