/* CSS Custom Properties (Variables) */
:root {
    --duller-grey: #6A6A6A;
    --duller-dark-grey: #4D4D4D;
    --duller-text-dark: #333333;
    
    /* Layout variables for responsive design - moved to responsive.css to avoid conflicts */
    --content-left-margin: calc(20vh + 50px); /* Desktop-specific left margin */
    --content-right-margin: 40px; /* Desktop-specific right margin */
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: content-box; /* Changed from border-box to allow full width usage */
}

html, body {
    height: 100%;
    overflow: hidden; /* Prevent default scrolling */
    width: 100%;
    margin: 0;
    padding: 0;
    /* NEW: Ensure no white space appears anywhere */
    background: #EBEBEB; /* Match hero background */
    position: relative;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    /* Removed background color to allow background image to show properly */
    /* Prevent text jumping during font loading */
    font-display: swap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* NEW: Ensure proper positioning and no white space */
    min-height: 100vh;
    max-height: 100vh;
}

/* Scroll container setup */
.scroll-container {
    height: 100vh;
    width: 100vw; /* Full viewport width for backgrounds */
    overflow: hidden;
    position: relative;
    /* Remove margins - backgrounds should extend full width */
    max-width: none;
    padding: 0;
}

/* Section styling - FIXED: Position sections absolutely for scrolljacking */
.section {
    height: 100vh;
    width: 100vw; /* Full viewport width for backgrounds */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Changed from relative to absolute */
    top: 0;
    left: 0;
    /* Removed overflow: hidden to prevent horizontal cutoff */
    /* Removed transition to prevent jumping */
    /* Backgrounds should extend full width */
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Section positioning for five sections */
.section:nth-child(1) { 
    transform: translateY(0);
}

.section:nth-child(2) { 
    transform: translateY(100vh);
}

.section:nth-child(3) { 
    transform: translateY(200vh);
}

.section:nth-child(4) { 
    transform: translateY(300vh);
}

.section:nth-child(5) { 
    transform: translateY(400vh);
}

/* Active section positioning */
.section.active {
    transform: translateY(0) !important;
    z-index: 10;
}

/* Grain texture overlay for all sections */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(0,0,0,0.1), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.1), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(0,0,0,0.08), transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.12), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}

/* Hero Section */
#hero {
    background: #EBEBEB;
    color: #8F8F8F;
    position: absolute;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.landing-foreground {
    position: fixed;
    inset: 0;
    z-index: 11;
    pointer-events: none;
}

body:not(.section-1-colors) .landing-foreground {
    visibility: hidden;
}

body.section-1-colors .landing-foreground {
    visibility: visible;
}

body.landing-initial-intro .landing-foreground .duller-logo {
    animation: landingFadeIn 1.4s ease 0.2s both;
}

body.landing-initial-intro .landing-foreground .hero-description {
    animation: landingFadeIn 1.6s ease 1.05s both;
}

body.landing-initial-intro .landing-foreground .engineering-evolution {
    animation: landingFadeIn 1.6s ease 1.05s both;
}

body.landing-initial-intro .scroll-line {
    transform-origin: bottom center;
    animation: landingLineGrow 1.4s ease 1.35s both;
}

@keyframes landingFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes landingLineGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

body.hero-return-fade-transition .landing-foreground .duller-logo {
    animation: heroReturnFadeIn 0.9s ease 0.35s both;
}

body.hero-return-fade-transition .landing-foreground .hero-description,
body.hero-return-fade-transition .landing-foreground .engineering-evolution {
    animation: heroReturnFadeIn 0.9s ease 0.55s both;
}

body.hero-return-fade-transition .scroll-line {
    transform-origin: bottom center;
    animation: landingLineGrow 0.8s ease 0.75s both;
}

@keyframes heroReturnFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Duller Logo Group */
.duller-logo {
    position: absolute;
    top: 40vh;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 34vw;
    max-width: 651.85px;
    height: auto;
    aspect-ratio: 651.85 / 96.26;
    z-index: 10;
    /* Prevent any movement */
    backface-visibility: hidden;
    perspective: 1000px;
}

.duller-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* Prevent any movement */
    backface-visibility: hidden;
}

/* Engineering Evolution Text */
.engineering-evolution {
    position: fixed;
    bottom: 88px; /* Position above scroll line */
    left: 114px; /* Keep landing label aligned with shifted left-side chrome */
    transform: rotate(270deg) translateZ(0);
    width: auto;
    height: auto;
    opacity: 1;
    /* Prevent any movement */
    backface-visibility: hidden;
    perspective: 1000px;
    /* Ensure proper positioning */
    transform-origin: left center;
    z-index: 10;
}

.engineering-evolution h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 400;
    color: #8F8F8F;
    line-height: 1.2em;
    letter-spacing: 3px;
    text-align: left; /* Changed from center to left */
    margin: 0;
    /* Ensure immediate visibility */
    opacity: 1;
    transform: none;
    /* Prevent any movement */
    backface-visibility: hidden;
    will-change: auto;
}

/* Hero Description */
.hero-description {
    position: absolute;
    top: 55vh; /* Position in lower 30% of screen */
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 450px;
    height: auto;
    /* Prevent any movement */
    backface-visibility: hidden;
    perspective: 1000px;
}

.hero-description p {
    font-family: 'Mukta Malar', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #8F8F8F;
    line-height: 1.5em;
    letter-spacing: 2%;
    text-align: center;
    margin: 0;
    /* Ensure immediate visibility */
    opacity: 1;
    transform: none;
    /* Prevent any movement */
    backface-visibility: hidden;
    will-change: auto;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    top: calc(100vh - 90px);
    left: 130px; /* Keep landing scroll mark aligned with shifted left-side chrome */
    display: block;
    width: 4px;
    height: 90px;
    transform: translateZ(0);
    pointer-events: none;
    z-index: 10000;
    transition: opacity 0.25s ease;
}

.scroll-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 90px;
    background: #8F8F8F;
    transition: background 0.25s ease;
}

.scroll-rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.75px;
    height: 23.38px;
    background: #8F8F8F;
    border-radius: 0;
    opacity: 0;
    transform: translateY(100vh);
}

/* Navigation dots */
.navigation-dots {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.nav-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.nav-dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 1);
}

/* Progress bar */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: transparent; /* Changed from rgba(255, 255, 255, 0.2) to transparent */
    z-index: 1000;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    width: 0%;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#kompetenzen {
    /* Removed background color to allow background image to show properly */
    color: #ffffff;
    position: relative;
    overflow: visible;
    background: transparent; /* Ensure no background color */
    border: none; /* Ensure no borders */
    outline: none; /* Ensure no outlines */
}

/* Background image full screen */
.kompetenzen-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2; /* Above the grain texture */
    overflow: hidden;
    background: transparent; /* Ensure no background color */
    opacity: 0;
    transform: translateY(0);
    transition: opacity 2.4s ease;
    pointer-events: none;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    opacity: 1; /* Changed from 0.6 to 1 for full image visibility */
    z-index: 2; /* Above the grain texture */
    /* Ensure the image scales up enough to cover the full viewport */
    min-width: 100vw;
    min-height: 100vh;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(235, 235, 235, 0.35); /* More opaque grey overlay closer to Section 1 color */
    z-index: 3; /* Above the background image and grain texture */
}

#kompetenzen .bg-overlay {
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 3.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path;
}

#kompetenzen.active .kompetenzen-background {
    opacity: 1;
    transform: translateY(0);
}

#kompetenzen.active .bg-overlay {
    clip-path: inset(50% 0 0 0);
}

#kompetenzen.prev .kompetenzen-background {
    opacity: 0;
    transform: translateY(0);
}

#kompetenzen.prev .bg-overlay {
    clip-path: inset(50% 0 50% 0);
}

#kompetenzen:not(.active):not(.prev) .kompetenzen-background {
    opacity: 0;
    transform: translateY(0);
}

#kompetenzen:not(.active):not(.prev) .bg-overlay {
    clip-path: inset(50% 0 50% 0);
}

body.kompetenzen-fade-transition #kompetenzen {
    transform: translateY(0) !important;
    transition: none !important;
    z-index: 10;
}

body.kompetenzen-fade-transition #kompetenzen .kompetenzen-background {
    transform: translateY(0);
}

/* Left Sidebar Navigation */
.left-sidebar {
    position: fixed; /* Changed from absolute to fixed for sticky positioning */
    left: 0;
    top: 0;
    width: 80px;
    height: 100vh;
    z-index: 9999; /* Highest z-index to be above everything else */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    /* Always visible - no more opacity changes */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    /* Ensure it's above all other elements */
    transform: translateZ(0);
    will-change: opacity;
}

/* Navigation Component */
.navigation-component {
    position: absolute;
    left: var(--left-nav-axis-x);
    top: 164.5px;
    display: flex;
    align-items: center;
    gap: var(--left-nav-text-gap);
    width: auto;
    height: auto;
    transform: translateX(calc(-1 * (var(--left-nav-text-width) + var(--left-nav-text-gap) + 0.5px)));
}

/* Section 2 Colors (White) - All navigation elements should be white */
.section-2-colors .nav-item {
    color: #ffffff; /* White color for all nav items */
}

.section-2-colors .nav-item.active {
    color: #ffffff; /* White color for active nav item */
}

/* Override the nav-item:not(.active) rule specifically for section 2 */
.section-2-colors .nav-text-frame .nav-item:not(.active) {
    color: #ffffff; /* White color for non-active nav items */
}

.section-2-colors .indicator-line {
    background: #ffffff;
}

.section-2-colors .nav-separator {
    background: #ffffff;
}

.section-2-colors .language-switcher {
    color: #ffffff;
}

.section-2-colors .lang-active {
    color: #ffffff;
}

.section-2-colors .lang-separator {
    color: #ffffff;
}

.section-2-colors .lang-option {
    color: #ffffff;
}

/* Section 3, 4, 5 Colors (Dark colors for light background) */
.section-3-colors .nav-item, .section-4-colors .nav-item, .section-5-colors .nav-item { 
    color: #AFAFAF; /* Lighter grey for non-active navigation */
}
.section-3-colors .nav-item.active, .section-4-colors .nav-item.active, .section-5-colors .nav-item.active { 
    color: #8F8F8F; /* Darker grey for active navigation */
}
.section-3-colors .indicator-line {
    background: #8F8F8F; /* Darker grey for indicator line */
}
.section-4-colors .indicator-line, .section-5-colors .indicator-line { 
    background: #8F8F8F; /* Darker grey for indicator line */
}
.section-3-colors .nav-separator {
    background: #8F8F8F; /* Darker grey for separator */
}
.section-4-colors .nav-separator, .section-5-colors .nav-separator { 
    background: #8F8F8F; /* Darker grey for separator */
}
.section-3-colors .language-switcher, .section-4-colors .language-switcher, .section-5-colors .language-switcher { 
    color: #8F8F8F; /* Darker grey for language switcher */
}
.section-3-colors .lang-active, .section-4-colors .lang-active, .section-5-colors .lang-active { 
    color: #8F8F8F; /* Darker grey for active language */
}
.section-3-colors .lang-separator, .section-4-colors .lang-separator, .section-5-colors .lang-separator { 
    color: #8F8F8F; /* Darker grey for language separator */
}
.section-3-colors .lang-option, .section-4-colors .lang-option, .section-5-colors .lang-option { 
    color: #8F8F8F; /* Darker grey for language options */
}

/* Section 3, 4, 5 Colors for Header and Footer */
body.section-3-colors .header-logo,
body.section-4-colors .header-logo,
body.section-5-colors .header-logo {
    filter: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.56) contrast(1) !important; /* #8F8F8F */
}

body.section-3-colors .header-logotype,
body.section-4-colors .header-logotype,
body.section-5-colors .header-logotype {
    filter: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.56) contrast(1) !important; /* #8F8F8F */
}

body.section-3-colors .bottom-tagline,
body.section-4-colors .bottom-tagline,
body.section-5-colors .bottom-tagline {
    color: #8F8F8F !important; /* Darker grey for footer */
}

/* Section 1 - Hide footer on hero section */
body.section-1-colors .main-footer {
    display: none !important;
}

/* Section 1 - Hide footer language switcher on hero section */
body.section-1-colors .footer-language-switcher {
    display: none !important;
}

/* Section 1 - Hide main language switcher on hero section */
body.section-1-colors .language-switcher {
    display: none !important;
}

/* Section 2 Colors for Header and Footer (keep white) */
body.section-2-colors .header-logo {
    filter: brightness(0) invert(1); /* White */
}

body.section-2-colors .header-logotype {
    filter: brightness(0) invert(1); /* White */
}

body.section-2-colors .bottom-tagline {
    color: #ffffff; /* White */
}

/* Section 5 Colors (Dark grey for the image background) */
.section-5-colors .nav-item,
.section-5-colors .nav-text-frame .nav-item:not(.active) {
    color: #4D4D4D;
}

.section-5-colors .nav-item.active {
    color: #333333;
}

.section-5-colors .indicator-line,
.section-5-colors .nav-separator {
    background: #333333;
}

.section-5-colors .language-switcher,
.section-5-colors .lang-active,
.section-5-colors .lang-separator,
.section-5-colors .lang-option {
    color: #4D4D4D;
}

body.section-5-colors .header-logo,
body.section-5-colors .header-logotype {
    filter: brightness(0) saturate(100%) invert(24%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.55) contrast(1) !important; /* #4D4D4D */
}

body.section-5-colors .bottom-tagline {
    color: #4D4D4D !important;
}

/* Frame 308: Navigation Text Items */
.nav-text-frame {
    display: flex;
    flex-direction: column;
    gap: 102px; /* Increased from 90px by 12px to make navigation longer towards bottom */
    width: var(--left-nav-text-width);
    align-items: center;
    position: relative; /* Ensure proper positioning context */
}

.nav-item {
    color: #848484; /* Default color - will be overridden by section classes */
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    letter-spacing: 2%;
    line-height: 1.171875em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    display: block;
    transition: color 0.3s ease;
}

.nav-item.active {
    color: #6A6A6A; /* Active state color - will be overridden by section classes */
    font-weight: 700;
    text-align: center;
}

/* Frame 309: Visual Indicators */
.nav-indicators-frame {
    position: relative; /* For absolute positioning of separator */
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    flex: 0 0 1px;
    width: 1px;
    height: auto;
}

/* Frame 310: Active indicator */
.nav-indicator {
    position: absolute;
    top: 0;
    right: 1px;
    display: block;
    gap: 0;
    padding: 0;
}

.indicator-line {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 110px; /* Reduced from 120px by 10px for better proportions */
    background: #6A6A6A; /* Default color - will be overridden by section classes */
    border-radius: 0;
    transition: transform 0.3s ease, height 0.3s ease; /* Added height transition */
    /* Ensure it's above the separator line */
    z-index: 2;
}

/* Vertical line separator */
.nav-separator {
    position: absolute; /* Position absolutely within the nav-indicators-frame */
    left: 0;
    right: auto;
    transform: none;
    top: 0; /* Start from the top */
    width: 1px;
    height: 100%; /* Will be dynamically adjusted by JavaScript */
    background: #6A6A6A; /* Default color - will be overridden by section classes */
    margin: 0; /* Remove all margins */
    /* Smooth transition for height changes */
    transition: height 0.3s ease;
    /* Ensure it's behind the indicator line */
    z-index: 1;
}

.language-switcher {
    position: absolute;
    bottom: 30px;
    left: var(--left-nav-axis-x);
    transform: translateX(-50%);
    color: #ffffff; /* Default color - will be overridden by section classes */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2%;
    /* Display language options horizontally in the same line */
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000; /* Ensure it's above the navigation background */
}

.lang-active {
    color: inherit; /* Inherit from parent section styling */
    font-weight: 700; /* Make selected language bold */
}

.lang-separator {
    margin: 0; /* Changed from margin: 8px 0 to remove vertical spacing */
    color: inherit; /* Inherit from parent section styling */
}

.lang-option {
    color: inherit; /* Inherit from parent section styling */
    cursor: pointer;
}

/* Main Content Area - moved to upper half */
.main-content-area {
    position: absolute;
    top: 150px; /* was 188px: move higher while keeping bottom alignment in flex */
    left: var(--content-left-margin); /* Use CSS variable for responsive left margin */
    right: var(--content-right-margin); /* Use CSS variable for responsive right margin */
    height: auto;
    z-index: 4; /* Above the grain texture, background images, and overlays */
    display: grid;
    grid-template-columns: 500px 1fr 460px; /* Left content, gap, right content */
    grid-template-areas: "left gap right";
    align-items: flex-end;
    /* Removed any max-width constraints to allow full width usage */
    /* Fade-in animation */
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Fade-in effect for section 2 main content */
body.section-2-colors #kompetenzen .main-content-area {
    opacity: 1;
}

/* Fade-in effect for section 2 competency section */
body.section-2-colors #kompetenzen .competency-section {
    opacity: 1;
}

/* Fade-in effect for section 4 fallstudien */
#fallstudien.reveal-ready .fallstudien-main {
    opacity: 1;
}

/* Left Content */
.left-content {
    grid-area: left;
    padding-top: 0;
    width: 500px; /* Increased from 400px to ensure 2-line layout */
}

.main-title {
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.1; /* Reduced from 1.2 to 1.1 for tighter 2-line layout */
    margin-bottom: 0;
    text-align: left;
    /* Remove conflicting properties that were causing issues */
    width: 100%;
    /* Let the text flow naturally within the container width */
    max-width: 500px; /* Ensure text doesn't exceed container width */
    word-break: normal; /* Prevent forced word breaks */
    overflow-wrap: normal; /* Allow natural line breaks */
}

/* Right Content */
.right-content {
    grid-area: right;
    width: 460px; /* Fixed width for right content column */
    align-self: flex-start;
    justify-self: end; /* Align to the right side of the grid area */
}

.main-text {
    color: #ffffff;
    font-family: 'Mukta Malar', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 2%;
}

.main-text p {
    margin: 0 0 20px 0;
}

.main-text p:last-child {
    margin-bottom: 0;
}

/* Competency Section in Lower Half */
.competency-section {
    position: absolute;
    top: 560px;
    left: var(--content-left-margin); /* align with headline */
    right: var(--content-right-margin); /* right margin */
    z-index: 4; /* Above the grain texture, background images, and overlays */
    /* Fade-in animation */
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Competency Grid */
.competency-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px); /* Fixed width: largest content + 8px padding */
    grid-template-rows: repeat(2, 1fr);
    gap: 48px;
    row-gap: 64px;
    width: 100%;
    max-width: 1300px;
    justify-content: space-between; /* center the grid in the available space */
    justify-items: start; /* left-align items in their cells */
}

.competency-item {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 240px;
    position: relative;
}

.competency-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    box-shadow: none;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.competency-icon::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    transition: height 0.65s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.competency-icon img {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;
}

/* Make Optik & Messtechnik icon 10% bigger */
.competency-item:nth-child(4) .competency-icon img {
    width: 28px !important; /* 24px + 10% = 26.4px */
    height: 28px !important; /* 24px + 10% = 26.4px */
}

.icon-grey {
    filter: none;
}

/* Utility classes for consistent colors */
.text-grey {
    color: var(--duller-grey);
}

.bg-grey {
    background-color: var(--duller-grey);
}

.border-grey {
    border-color: var(--duller-grey);
}

.competency-text-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 12px; /* Add some space after the icon */
    position: relative;
    z-index: 2; /* Higher than the icon background */
}

.competency-label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Reduced to 16px for better proportion */
    font-weight: 400; /* Not bold */
    color: #ffffff;
    text-align: center;
    letter-spacing: 2%;
    text-decoration: none;
    white-space: nowrap;
    transition: font-weight 0.2s ease; /* Smooth transition for hover effect */
}

/* Hover effect for competency items */
.competency-item:hover .competency-label {
    font-weight: 700; /* Bold on hover */
    color: #ffffff;
}

.competency-item:hover .competency-icon {
    background: transparent;
}

.competency-item:hover .competency-icon::before {
    height: 100%;
    background: rgba(255, 255, 255, 1);
}

.competency-item:hover .competency-icon img {
    filter: brightness(0) saturate(0%) invert(0.56);
}

.competency-item:hover::after {
    opacity: 1;
}

.competency-item::before {
    content: none;
}

.competency-item:hover::before {
    width: 0;
}

/* Underline for each competency item (icon + text) */
.competency-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 56px; /* Start from the right edge of the icon background */
    width: calc(100% - 56px); /* Stop at the icon background edge */
    height: 1px;
    background: rgba(255, 255, 255, 0.8); /* 20% transparent white */
    transform-origin: left center; /* Set transform origin for proper scaling */
    transition: opacity 0.3s ease; /* Add smooth transition for opacity */
}



/* Competency link overlay - invisible hitbox covering entire area */
.competency-link-overlay {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.competency-link-overlay:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%236A6A6A" opacity="0.8"/></svg>') 12 12, auto;
}

/* Main Footer Container - Override components.css for main page */
.main-footer {
    position: fixed; /* Changed from absolute to fixed for consistent mobile behavior */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 9997;
    padding: 0 40px 0 40px; /* Added left padding to match website margins */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Restored original layout */
    gap: 20px;
    min-height: 24px; /* Ensure consistent height for alignment */
}







/* Über uns Section (Section 5) - adopt Section 2/3 layout with light background */
#uber-uns {
    background: #EBEBEB;
    color: #4D4D4D;
    position: absolute;
    overflow: hidden;
}

#uber-uns .main-title { color: var(--duller-grey); }
#uber-uns .main-text { color: var(--duller-grey); } 

/* Section 5 details grid */
#uber-uns .about-buttons { 
    position: absolute;
    left: 0; /* Align with left edge of main-content-area */
    top: 48px;
    display: flex; 
    gap: 48px; 
}



/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive for navigation */
@media (max-width: 768px) {
    .navigation-dots {
        right: 20px;
        gap: 12px;
    }
    
    .nav-dot {
        width: 10px;
        height: 10px;
    }
    
    .progress-bar {
        height: 3px;
    }
} 

/* Sticky Header - Single instance for all sections */
.sticky-header {
    position: fixed; /* Truly sticky above all content */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 80px;
    z-index: 10001; /* Above left navigation so the logo remains fully clickable */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px 30px 100px; /* Test shift: move left-side chrome 50px farther from the original edge */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
    /* Ensure header extends to full viewport width */
    min-width: 100vw;
    overflow: visible; /* Prevent content from being cut off */
    background: transparent; /* Ensure header background is transparent */
    border: none; /* Ensure no borders */
    outline: none; /* Ensure no outlines */
    /* Smooth transitions for visibility */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.header-logo-left {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent logo from shrinking */
    position: relative;
    z-index: 10002;
}

.header-logo {
    height: 29.7px; /* Reduced by 10% from 33px */
    width: 39.6px; /* Reduced by 10% from 44px */
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.42) contrast(1);
}

.header-logo-right {
    display: flex;
    align-items: center;
    /* Ensure the logotype is fully visible */
    margin-right: 0;
    padding-right: 0;
    flex-shrink: 0; /* Prevent logotype from shrinking */
    position: relative; /* Ensure proper positioning */
    z-index: 10002;
}

.header-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    position: relative;
    z-index: 10003;
}

.header-logotype {
    height: 29.7px; /* Reduced by 10% from 33px */
    width: auto;
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.42) contrast(1);
    /* Ensure the logotype is fully visible */
    max-width: none;
    overflow: visible;
    flex-shrink: 0; /* Prevent logotype from shrinking */
}

/* Left Sidebar Navigation - Single instance for all sections */
.left-sidebar {
    position: fixed; /* Truly sticky above all content */
    left: 0;
    top: 0;
    width: 80px;
    height: 100vh;
    z-index: 9999; /* Highest z-index to be above everything else */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    /* Smooth transitions for visibility */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
    /* Ensure it's above all other elements */
    transform: translateZ(0);
    will-change: opacity;
}

/* Bottom Tagline - Single instance for all sections */
.bottom-tagline {
    position: fixed; /* Truly sticky above all content */
    bottom: var(--desktop-footer-content-bottom);
    right: var(--content-right-margin); /* Already correct - matches the 40px right margin */
    color: #ffffff; /* Default color for dark backgrounds (sections 1, 2) */
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: italic; /* Changed from normal to italic */
    text-transform: none;
    letter-spacing: 22.5%;
    z-index: 9997; /* High z-index, below navigation but above content */
    /* Smooth transitions for visibility */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
} 

body.section-2-colors .sticky-header,
body.section-3-colors .sticky-header,
body.section-4-colors .sticky-header,
body.section-5-colors .sticky-header,
body.section-2-colors .left-sidebar,
body.section-3-colors .left-sidebar,
body.section-4-colors .left-sidebar,
body.section-5-colors .left-sidebar,
body.section-2-colors .bottom-tagline,
body.section-3-colors .bottom-tagline,
body.section-4-colors .bottom-tagline,
body.section-5-colors .bottom-tagline {
    opacity: 1;
    pointer-events: auto;
}

/* Services Section */
#services {
    background: #EBEBEB; /* Same background as section 1 (hero) */
    color: #4D4D4D; /* Dark text color as per Figma design */
    position: absolute; /* Changed from relative to absolute for consistency */
    overflow: hidden;
}

.services-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1120px; /* Restored to original width since backgrounds are full width */
    z-index: 3;
}

.services-content {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.services-left {
    flex: 1;
    max-width: 460px;
}

.services-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 1.2;
    margin: 0 0 20px 0;
    text-align: left;
}

.services-description {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-description p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 1.4;
    letter-spacing: 2%;
    margin: 0;
}

.services-right {
    flex: 1;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 80px;
    width: 100%;
    background: #D0D0D0;
    border-radius: 8px;
    padding: 0 20px;
    transition: background-color 0.3s ease;
}

.service-item:hover {
    background: #C0C0C0;
}

.service-name {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 1.2;
    letter-spacing: 2%;
    margin: 0;
    flex: 1;
}

.service-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

 

/* Services: edge-to-edge link rows */
#services {
    background: #EBEBEB;
    color: #4D4D4D;
    position: absolute;
    overflow: hidden;
}

body.services-fade-transition #services {
    transform: translateY(0) !important;
    transition: none !important;
    z-index: 10;
}

/* Services container with proper positioning */
.services-container {
    position: absolute;
    top: 110px; /* Position above main content for section 3 */
    left: 0; /* start from left screen edge */
    width: 100vw; /* full viewport width */
    z-index: 2;
    opacity: 1;
}

#services .services-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Service item grid layout moved to more specific rule below */

#services .service-item:first-child {
    border-top: none;
}



/* Service name styling is now handled by wide-bar implementation */

/* Line functionality is now handled by wide-bar implementation */



 

/* Section 3 text colors */
#services .main-title { color: var(--duller-grey); }
#services .main-text { color: var(--duller-grey); }

/* Section 4 (Fallstudien) */
#fallstudien {
    background: #EBEBEB; /* Same background as section 1 (hero) */
    color: #4D4D4D; /* Updated to #4D4D4D */
    position: absolute; /* Changed from relative to absolute for consistency */
    overflow: hidden;
}
.fallstudien-title { color: var(--duller-grey); }
.fallstudien-text { color: var(--duller-grey); }

/* Section 5 (Über uns) */
#uber-uns {
    background: #EBEBEB;
    color: #4D4D4D; /* Updated to #4D4D4D */
    position: absolute; /* Changed from relative to absolute for consistency */
    overflow: hidden;
}

#uber-uns.active {
    background: #EBEBEB;
}

#uber-uns::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(235, 235, 235, 0) 58%, #EBEBEB 86%, #EBEBEB 100%),
        url('../bg/uberuns.png') calc(50% - min(22vw, 360px) + 150px) center/cover no-repeat,
        #EBEBEB;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3s ease;
    z-index: 1;
}

#uber-uns.active::before {
    opacity: 1;
}

/* New Section 5 layout based on updated Figma design */
#uber-uns .uber-uns-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: absolute;
    top: 166px;
    left: var(--content-left-margin); /* Match sections 3 and 4 positioning */
    width: calc(100vw - var(--content-left-margin) - 40px); /* Match sections 3 and 4 width */
    z-index: 4;
}

#uber-uns .uber-uns-text {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 4%;
    color: var(--duller-grey);
    text-align: left;
    width: min(704px, 100%);
    margin-bottom: 0; /* Remove margin since flexbox handles spacing */
}

#uber-uns .uber-uns-text p {
    margin: 0 0 20px 0;
}

#uber-uns .uber-uns-text p:last-child {
    margin-bottom: 0;
}

/* Google Maps embed */
#uber-uns .google-maps-embed {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

/* Bottom section with two-row layout */
#uber-uns .uber-uns-bottom-section {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vh, 80px); /* Keep the desktop rhythm while allowing short screens to breathe */
    position: fixed !important;
    left: var(--content-left-margin);
    bottom: 160px; /* Bottom align the entire section */
    width: calc(100vw - var(--content-left-margin) - var(--content-right-margin)); /* Full width minus margins */
}

#uber-uns:not(.active) .uber-uns-bottom-section {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#uber-uns.active .uber-uns-bottom-section {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Top row: Text and buttons side by side */
#uber-uns .uber-uns-top-row {
    display: grid;
    grid-template-columns: minmax(420px, 704px) minmax(260px, 355px);
    justify-content: flex-end;
    align-items: flex-start; /* Top align text and buttons */
    gap: clamp(24px, 3vw, 40px); /* Space between text and buttons */
}

/* Bottom row: Contact details and map */
#uber-uns .uber-uns-bottom-row {
    display: grid;
    grid-template-columns: minmax(420px, 704px) minmax(260px, 355px);
    justify-content: flex-end;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 40px);
}

#uber-uns .uber-uns-bottom-row .uber-uns-left-column {
    align-items: flex-end;
    width: min(355px, 100%);
}

/* Left column with buttons */
#uber-uns .uber-uns-left-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align buttons to the left */
    width: min(355px, 100%); /* Match the map width */
}

#uber-uns .uber-uns-buttons {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

#uber-uns .uber-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-decoration: none;
    color: var(--duller-text-dark);
    box-sizing: border-box;
    width: min(355px, 100%);
    height: 48px;
    padding: 9px 20px;
    border: 1px solid rgba(77, 77, 77, 0.3);
    transition: all 0.3s ease;
}

#uber-uns .uber-btn:hover {
    border-color: var(--duller-grey);
    background-color: rgba(106, 106, 106, 0.05);
}

#uber-uns .btn-text {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2%;
    color: var(--duller-text-dark);
    transition: font-weight 0.2s ease; /* Smooth transition for hover effect */
}

/* Hover effect for button text */
.uber-btn:hover .btn-text {
    font-weight: 700; /* Bold on hover */
}

#uber-uns .btn-arrow {
    color: var(--duller-text-dark);
    stroke-width: 2px;
}

/* Contact details column */
#uber-uns .uber-uns-right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    opacity: 0.8;
    flex: 0 1 704px;
    width: min(704px, 100%); /* Match the text block width above */
}

/* Map container */
#uber-uns .uber-uns-map-container {
    width: min(355px, 100%);
    height: 190px;
    /* No margin needed in flexbox layout */
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Present the map as a static image */
#uber-uns .uber-uns-map-container iframe {
    height: calc(100% + 160px);
    filter: grayscale(100%) brightness(0.9);
    pointer-events: none;
    transition: filter 0.3s ease;
    transform: translateY(-80px);
}

#uber-uns .uber-uns-map-container:hover iframe {
    filter: grayscale(70%) brightness(0.9);
}

/* Info grid container for address and contact details */
#uber-uns .uber-uns-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px;
    width: 100%;
    /* Positioned by parent container */
}

/* Address information */
#uber-uns .uber-uns-address-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start; /* Top align the content */
    gap: 4px;
    text-align: right;
    margin-bottom: 0; /* Remove bottom margin since grid handles spacing */
    height: 100%; /* Take full height of grid cell */
}

#uber-uns .company-name {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2%;
    color: var(--duller-text-dark);
    margin: 0;
}

#uber-uns .company-address {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 2%;
    color: var(--duller-text-dark);
    margin: 0;
    text-align: right;
}

/* Contact details */
#uber-uns .uber-uns-contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

#uber-uns .contact-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: auto; /* Allow natural width based on content */
    min-width: 200px; /* Ensure minimum width for proper layout */
}

#uber-uns .contact-label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700 !important; /* Made bold with !important to ensure it overrides */
    line-height: 1.2;
    letter-spacing: 7%;
    color: var(--duller-text-dark);
    margin-bottom: 4px;
    transition: font-weight 0.2s ease; /* Smooth transition for hover effect */
}

/* Hover effect for contact labels */
#uber-uns .contact-item:hover .contact-label {
    font-weight: 900 !important; /* Extra bold on hover */
}

#uber-uns .contact-value {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 7%;
    color: var(--duller-text-dark);
    white-space: nowrap; /* Prevent unnecessary line breaks */
}

#kompetenzen .main-content-area,
#services .main-content-area {
    align-items: flex-end;
} 

#kompetenzen .right-content,
#services .right-content {
    align-self: auto; /* inherit container align-items: flex-end */
}

/* Section 3 specific positioning - main content below services */
#services .main-content-area {
    top: 580px !important; /* Force position much lower below services container */
    align-items: flex-start; /* Top align title and description */
    opacity: 1;
}

/* Services overview: swap title and text columns. Remove this block to reverse. */
#services .left-content {
    grid-area: right;
    justify-self: end;
}

#services .main-title {
    text-align: right;
}

#services .right-content {
    grid-area: left;
    justify-self: start;
}

/* Service item styling is now handled by wide-bar implementation */ 

/* Wide bar service item styling */
#services .services-grid .wide-bar {
    overflow: hidden; /* Ensure the animation is contained */
}

#services .services-grid .wide-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 2.2s ease, transform 0.3s ease;
}

#services.is-services-revealed .services-grid .wide-bar::before {
    opacity: 1;
}

/* Individual background images for each service item */
#services .services-grid .wide-bar:nth-child(1) {
    background: none; /* Remove background from main element */
    position: relative;
    transition: transform 0.3s ease; /* Add transition for hover effect */
}

#services .services-grid .wide-bar:nth-child(1):hover {
    transform: scale(1.02); /* Add subtle zoom on hover to main element */
}

#services .services-grid .wide-bar:nth-child(1)::before {
    background: url('../servicesBG/Frame 217.jpg') center/cover no-repeat;
    transform: scaleX(-1); /* Horizontally flip only the background image */
}

#services .services-grid .wide-bar:nth-child(1):hover::before {
    transform: scaleX(-1) scale(1.02); /* Flip and subtle zoom on hover */
}

#services .services-grid .wide-bar:nth-child(2) {
    background: none;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

#services .services-grid .wide-bar:nth-child(2)::before {
    background: url('../servicesBG/Frame 217-3.jpg') center/cover no-repeat;
}

#services .services-grid .wide-bar:nth-child(2):hover {
    transform: scale(1.02); /* Subtle zoom on hover */
}

#services .services-grid .wide-bar:nth-child(3) {
    background: none;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

#services .services-grid .wide-bar:nth-child(3)::before {
    background: url('../servicesBG/Frame 217-2.jpg') calc(50% - 40px) center/cover no-repeat;
}

#services .services-grid .wide-bar:nth-child(3):hover {
    transform: scale(1.02); /* Subtle zoom on hover */
}

#services .services-grid .wide-bar:nth-child(4) {
    background: none;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

#services .services-grid .wide-bar:nth-child(4)::before {
    background: url('../servicesBG/Frame 217-1.jpg') center/cover no-repeat;
}

#services .services-grid .wide-bar:nth-child(4):hover {
    transform: scale(1.02); /* Subtle zoom on hover */
}

/* Wide bar implementation for section 3 services */
:root {
    --bar-h: 108px;
    --left-offset: calc(20vh + 50px);  /* distance from left edge to the text - match main content margin */
    --gap: 24px;           /* gap between text and the line */
}

/* Container bar */
.wide-bar {
    --rule-rest-left: -24px;
    --rule-hover-left: -24px;
    --rule-rest-extra-width: 24px;
    --rule-hover-extra-width: 24px;
    width: 100%;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    padding-left: var(--left-offset);
    gap: var(--gap);
    /* background image stretches the bar's width and height */
    background: #EBEBEB; /* Default background, will be overridden per item */
    position: relative;
    overflow: hidden; /* ensure the rule is clipped cleanly at the text edge */
    cursor: pointer;
    opacity: 1; /* Always visible, no fade-in */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
}

/* Text block */
.wide-bar__text {
    color: var(--duller-grey);  /* Back to duller grey color */
    font: 400 16px/1 'Inter', sans-serif;
    white-space: nowrap;
    flex: 0 0 auto;
    position: relative;
    z-index: 1; /* keep text above the line while it grows */
    transition: font-weight 0.2s ease;
}

.wide-bar__text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 26.5px;
  width: 0;
  height: 7px;
  background: var(--duller-grey);
  opacity: 0;
  pointer-events: none;
  transition: width 1.2s ease, opacity 0.2s ease;
}

.wide-bar:hover .wide-bar__text {
    font-weight: 700;
}



/* Section 4 (Fallstudien) layout */
#fallstudien {
    background: #EBEBEB;
    color: #4D4D4D;
    position: absolute;
    overflow: hidden;
}

/* Fallstudien main container with grid layout */
.fallstudien-main {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--content-left-margin);
    right: var(--content-right-margin);
    display: grid;
    grid-template-columns: minmax(360px, 500px) minmax(32px, 1fr) minmax(320px, 460px); /* Left content, gap, right content */
    grid-template-areas: "left gap right";
    align-items: center;
    /* Fade-in animation */
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Left vertical case list */
.case-grid {
    grid-area: left;
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 110px)); /* 4 narrow columns */
    gap: clamp(12px, 1.4vw, 20px);
    align-items: stretch;
    justify-self: start;
}

.case-item {
    position: relative;
    z-index: 0;
    --image-shift: 0px;
    --case-height: clamp(420px, calc(100vh - 150px), 717px);
    --case-edge-duration: 1.35s;
    --case-top-gap: max(0px, calc((100vh - var(--case-height)) / 2 + var(--image-shift)));
    --case-bottom-gap: max(0px, calc((100vh - var(--case-height)) / 2 - var(--image-shift)));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: var(--case-height); /* per figma column height */
    text-decoration: none;
    border-radius: 0;
    overflow: visible;
    opacity: 0;
    transition: opacity 1.35s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.case-item:nth-child(1),
.case-item:nth-child(3) {
    transform: translateY(-56px);
}

.case-item:nth-child(2),
.case-item:nth-child(4) {
    transform: translateY(56px);
}

#fallstudien.reveal-ready .case-item {
    opacity: 1;
    transform: translateY(0);
}

#fallstudien.reveal-ready .case-item:nth-child(1) { transition-delay: 0.12s; }
#fallstudien.reveal-ready .case-item:nth-child(2) { transition-delay: 0.28s; }
#fallstudien.reveal-ready .case-item:nth-child(3) { transition-delay: 0.44s; }
#fallstudien.reveal-ready .case-item:nth-child(4) { transition-delay: 0.6s; }

/* Background images moved to pseudo-elements to avoid affecting text positioning */
.case-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #DDD;
    z-index: 0;
    filter: brightness(0.85);
    transform-origin: center;
    transition: top 0.35s ease, height 0.35s ease, transform 0.35s ease, filter 0.35s ease;
    will-change: transform, filter;
}

.case-1,
.case-3 {
    --image-shift: -20px;
}

.case-2,
.case-4 {
    --image-shift: 20px;
}

.case-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--duller-grey);
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    top: -24px; /* Move all text labels 24px higher */
    transition: font-weight 0.2s ease; /* Smooth transition for hover effect */
}

.case-edge {
    position: absolute;
    left: 0;
    width: 100%;
    background:
        linear-gradient(to right, #CCCCCC 0 1px, transparent 1px calc(100% - 1px), #CCCCCC calc(100% - 1px) 100%);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.case-edge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    transform: scaleY(0);
    transition: transform var(--case-edge-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.case-edge-top {
    bottom: calc(100% - var(--image-shift));
    height: var(--case-top-gap);
}

.case-edge-top::before {
    transform-origin: bottom;
}

.case-edge-bottom {
    top: calc(100% + var(--image-shift));
    height: var(--case-bottom-gap);
}

.case-edge-bottom::before {
    transform-origin: top;
}

.case-item:hover .case-edge::before {
    transform: scaleY(1);
}

/* Hover effect for case items */
.case-item:hover .case-label {
    font-weight: 700; /* Bold on hover */
}

.case-1:hover::before,
.case-3:hover::before {
    transform: translateY(var(--image-shift));
    filter: brightness(1);
}

.case-2:hover::before,
.case-4:hover::before {
    transform: translateY(var(--image-shift));
    filter: brightness(1);
}

/* Make text white for images 1, 3, and 4, keep image 2 with current color */
.case-item:nth-child(1) .case-label,
.case-item:nth-child(3) .case-label,
.case-item:nth-child(4) .case-label {
    color: #ffffff;
}

/* Right title and description - aligned with sections 2 and 3 */
.fallstudien-header {
    grid-area: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 460px; /* Fixed width matching sections 2 and 3 */
    justify-self: end; /* Align to the right side of the grid area */
}

.fallstudien-title {
    font-family: 'Inter', sans-serif;
    font-size: 60px;
    font-weight: 400;
    color: var(--duller-grey);
    line-height: 1.2;
    margin: 0;
}

.fallstudien-description p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--duller-grey);
    margin: 0;
}

/* Second sentence with 50% transparency */
.fallstudien-description .transparent-text {
    opacity: 0.5;
}

/* Case item placeholder images (can be replaced by real assets) */
.case-1::before { 
    background: #DDD url('../casesBG/drucker.jpg') center/cover no-repeat;
    transform: translateY(-20px); /* Move background image up by 20px */
}
.case-2::before { 
    background: #DDD url('../casesBG/helm.jpg') center/cover no-repeat;
    transform: translateY(20px); /* Move background image down by 20px */
}
.case-3::before { 
    background: #DDD url('../casesBG/linse.jpg') center/cover no-repeat;
    transform: translateY(-20px); /* Move background image up by 20px */
}
.case-4::before { 
    background: #DDD url('../casesBG/stativ.jpg') center/cover no-repeat;
    transform: translateY(20px); /* Move background image down by 20px */
}

@media (prefers-reduced-motion: reduce) {
    .case-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* Responsive breakpoints for content layout - moved to responsive.css to avoid conflicts */

/* Wide screen breakpoint - center content and add grey background */
@media (min-width: 1921px) {
    :root {
        --content-left-margin: calc((100vw - 1920px) / 2 + 20vh + 50px);
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #f5f5f5; /* Light grey background for wide screens */
        z-index: -1;
    }
    
    .scroll-container {
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
    }
    
    .section {
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
    }
} 



/* Section 4 (Fallstudien) layout */
#fallstudien {
    background: #EBEBEB;
    color: #4D4D4D;
    position: absolute;
    overflow: hidden;
}

/* Simple line rule */
.wide-bar__rule {
  --services-horizontal-line-color: var(--duller-grey);
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 0.5px;
  background: var(--services-horizontal-line-color);
  width: calc(100% + var(--rule-rest-extra-width));
  opacity: 1; /* Always visible for testing */
  transform: translateX(650px); /* Start farther right so the opening growth has more runway */
  left: var(--rule-rest-left); /* Resting position reaches the title's left edge */
  transition: transform 5s ease, top 0.3s ease, left 1.2s ease, width 1.2s ease;
  top: 25.5px; /* Keep the line at its hover vertical position */
}

/* Show line when section 3 is active */
.wide-bar.is-active .wide-bar__rule {
  transform: translateX(0); /* Slide to final position */
}

/* Hover effect for wide bars */
.wide-bar:hover .wide-bar__rule {
  left: var(--rule-hover-left); /* Fat indicator pushes the thin line edge-to-edge */
  width: calc(100% + var(--rule-hover-extra-width));
}

.wide-bar.is-fat-active .wide-bar__text::after {
  opacity: 1;
  width: 100%;
}