/* Editorial Frosted Glass Theme */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text-color: #ffffff;
    --glass-blur: 15px;
    /* Heavy blur like the reference */
    --noise-opacity: 0.15;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    position: relative;
    scroll-behavior: smooth;
    /* Fix for iOS Safari background-attachment: fixed bug */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Safari fallback */
    height: 100dvh;
    background-image: url('Bilder/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transform: translateZ(0);
    /* Hardware acceleration */
}

.landing-section {
    height: 100vh;
    height: 100dvh;
    /* Safari iOS Fix */
    width: 100%;
    position: relative;
    /* Keeps the logic of the first screen */
}

/* PROJECT SCROLL SECTION */
.project-scroll-container {
    height: 300vh;
    /* Long scroll distance for the animation */
    position: relative;
    background: transparent;
    /* See background through */
}

/* The Sticky Wrapper - NOW RELATIVE for tight list flow */
.sticky-wrapper {
    position: relative;
    /* Changed from sticky to normal flow */
    height: auto;
    /* Allow it to wrap the content exactly */
    /* REMOVED MIN-HEIGHT causing the gap issue */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    /* clearer interactions */
    margin-bottom: 15px;
    /* Exact spacing requested */
}

/* The Card Itself */
.project-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    /* Initial State (Bar) - Overridden by JS but good defaults */
    height: 80px;
    width: 90vw;
    /* Full width as requested */
    border-radius: 32px;

    position: relative;
    /* Scroll-Driven: No CSS transition, JS handles it directly */
    transition: none;
    overflow: hidden;

    /* OPTIMIZATION: Hardware Acceleration hints */
    will-change: height, width, border-radius;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Safari Hardware acceleration */
    /* Force GPU layer */
}

/* ... skipped ... */

.v2-secondary-area {
    margin-top: auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: 20px;
    padding-right: 20px;
}

/* Replaced .v2-mini-img with .v2-carousel */

.btn-view-project {
    position: absolute;
    /* Absolute positioning for precise overlap */
    bottom: 40px;
    right: 240px;
    /* Push LEFT into the image */

    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform 0.2s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10;
    /* On TOP of image */
}

.btn-view-project:hover {
    transform: scale(1.05);
}

/* EXPANDED CARD CONTENT STYLES */

.col-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 2rem;
    position: relative;
}

.v2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.v2-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    opacity: 1;
}

.v2-details {
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.8;
    color: #ffffff;
}

.v2-title {
    font-size: 5rem;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.v2-desc {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
    flex-grow: 0;
    margin-bottom: 1rem;
    max-height: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

/* TITLE ROW */
.title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

/* NEW VIEW BUTTON (Next to Title) */
.btn-view-title {
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 20px;
    transition: transform 0.2s, background 0.2s;
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-view-title:hover {
    transform: scale(1.05);
    background: #f0f0f0;
}


/* Removed duplicated v2-secondary-area */

/* Stretches handled by base class below */

/* Placeholder box */
.placeholder-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.2);
}

/* Content inside the Bar (Visible when closed) */
.bar-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    white-space: nowrap;
}

.bar-number {
    font-size: 3rem;
    /* Much larger */
    font-weight: 900;
    /* Extra bold */
}

.bar-title {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Content inside the Expanded Card (Visible when open) */
.full-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Hidden by default */
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* 
   NEW CARD LAYOUT (V2) 
   - Left: Main Image (Rounded)
   - Right: Text + Sec Image + Button
*/
.card-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

.col-left {
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.main-feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-company-logo {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    /* Adds a slight shadow to make light logos visible on light images */
}

.col-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.v2-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
}

.v2-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    opacity: 1;
    -webkit-text-stroke: 2px #ffffff;
}

.v2-details {
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.8;
}

.title-row-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
}

.v2-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 0;
    text-transform: uppercase;
}

.v2-desc {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
    flex-grow: 0;
    /* Don't stretch */
    margin-bottom: 2rem;
    max-height: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 10;
}

.v2-secondary-area {
    margin-top: auto;
    /* Push to bottom */
    display: flex;
    flex-direction: column;
    /* Allows vertical constraints */
    align-items: stretch;
    /* Fills width */
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
    flex: 1 1 auto;
    /* Important flex fix to prevent stretching past parent container in Safari */
    /* overflow: hidden; Removed so absolute children aren't clipped if needed, though they are inside anyway */
}

.v2-half-img {
    position: absolute;
    top: 14rem;
    /* Start higher up, just below the big number and title baseline */
    bottom: 0;
    right: 0;
    width: calc(100% + 0rem);
    /* Extend into the gap on the left */
    /* Respect the 2rem left padding of col-right */
    /* Exactly up to the middle */
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 1;
    /* Behind text */
}

.v2-half-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    /* Fix items collapsing in Safari flex container */
    justify-content: center;
    align-items: center;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Minimalist Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 8px;
}

.carousel-next {
    right: 8px;
}

/* Project Capability Icons */
.project-capabilities {
    position: relative;
    /* Not absolute anymore, sits naturally above the image */
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    /* More spacing between icons */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
    /* Space before the carousel below it */
    z-index: 20;
}

.p-cap-icon {
    display: flex;
    flex-direction: column;
    /* Stack icon and text */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Space between circle and text */
    color: #ffffff;
}

.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    /* Slightly larger */
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease;
}

.icon-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* View Project Button */
.btn-view-project {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    padding: 1.5rem 4.5rem;
    border-radius: 100px;
    font-weight: 900;
    font-size: 3.5rem;
    letter-spacing: -2px;
    /* Typisches enges Spacing für dieses fette Design */
    line-height: 1;
    margin-top: 0;
    width: fit-content;
    align-self: center;
    /* Mittig neben dem Titel ausrichten */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-view-project:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Placeholder box */
.placeholder-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.2);
}


/* 
   NOISE FILTER LAYOUT 
   Uses an SVG filter or noise image. 
   Here we use a base64 noise pattern for the "milchglas" grain.
*/
.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 
   THE FROSTED GLASS LAYER 
   This element blurs the woman behind it.
   The referenced image has a very strong distortion/blur.
*/
.glass-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(var(--glass-blur)) brightness(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(1.1);
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle white tint */
    z-index: 1;
}

/* LAYOUT CONTAINER */
.editorial-grid {
    position: relative;
    z-index: 20;
    /* Above glass */
    height: 100vh;
    height: 100dvh;
    /* Safari iOS Fix */
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 2rem;
}

/* LOGO CENTER */
.center-stage {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main-logo {
    max-width: 80vw;
    width: 600px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    mix-blend-mode: overlay;
    /* Blends nicely with the glass */
}

/* If the logo is black in the file, invert it or use filter to make it white if needed. 
   Assuming the uploaded logo is the black text one, we might need to invert it 
   if the design is dark, or keep it black if the design is light. 
   The reference is B&W/High Contrast. Let's try high contrast white.
*/
.main-logo.invert {
    filter: invert(1) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* CORNER TEXTS (Editorial Style) */
.corner-tl {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

.corner-tr {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
}

.corner-bl {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
}

.corner-br {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    align-self: end;
    text-align: right;
}

.meta-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.6;
    opacity: 0.9;
    mix-blend-mode: difference;
    /* Ensures visibility on any background */
    color: white;
}

/* VERTICAL TEXT DECORATION */
.scrolling-text {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* SECTION HEADER */
.project-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 15vw;
    /* Massive responsive size */
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: 900;
    margin-top: 10vh;
    margin-bottom: 10vh;
    /* Symmetric: Same distance below as above */
    letter-spacing: -0.05em;
    pointer-events: none;
    /* mix-blend-mode: overlay; <-- REMOVED per user request for white */
    position: relative;
    z-index: 5;
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {

    /* 1. LANDING PAGE ADAPTATIONS */
    /* 1. LANDING PAGE ADAPTATIONS */
    .editorial-grid {
        display: flex;
        /* Switch to flex for easier vertical stacking */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem;
    }

    /* Re-position corners safely or hide/adjust */
    .corner-tl,
    .corner-tr,
    .corner-bl,
    .corner-br {
        position: absolute;
        /* Float them to corners regardless of flex flow */
    }

    .corner-tl {
        top: 1rem;
        left: 1rem;
    }

    .corner-tr {
        top: 1rem;
        right: 1rem;
    }

    .corner-bl {
        bottom: 6rem;
        left: 1rem;
    }

    /* Above scrolling text */
    .corner-br {
        bottom: 6rem;
        right: 1rem;
    }

    .center-stage {
        /* No longer grid-constrained */
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
    }

    .meta-text {
        font-size: 0.65rem;
        /* Smaller corner text */
        letter-spacing: 0.1em;
    }

    .main-logo {
        width: 80vw;
        /* Fill 80% of screen (10% margins) */
        max-width: none;
        /* Remove desktop limit */
    }

    /* 2. TYPOGRAPHY SCALING */
    .project-section-title {
        font-size: 13vw;
        /* Smaller to fit in 80% width */
        max-width: 80vw;
        margin-left: auto;
        margin-right: auto;

        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    /* 3. PROJECT CARD ADAPTATIONS */
    /* Stack content vertically */
    .card-grid-v2 {
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: auto 1fr;
        /* Image top, content bottom */
        gap: 1rem;
    }

    .col-left {
        height: 250px;
        /* Fixed height for image on mobile */
        border-radius: 20px;
    }

    .v2-title {
        font-size: 2.5rem;
        /* Smaller title */
        margin-bottom: 0.5rem;
    }

    .v2-number {
        font-size: 4rem;
        -webkit-text-stroke: 1px #ffffff;
    }

    .v2-desc {
        font-size: 0.9rem;
        max-height: 100px;
        /* Limit text height */
    }

    /* Adjust button and secondary image */
    .v2-secondary-area {
        flex-direction: row;
        align-items: center;
    }

    .v2-half-img {
        position: relative;
        width: 100%;
        height: 250px;
        /* Fixed height so it looks good on mobile */
        margin-top: 1rem;
    }
}