/* =============================================
   ANGEBOT PAGE — Reichert-Ventures
   Style rules for photo services glass page
   ============================================= */

/* Allow smooth scrolling on the showcase */
.landing-overlay {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden !important; /* Block horizontal scrolling */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2vh;
    padding: 0 4vw 1.5vh !important; /* Flush top */
}

/* --- Header Panel: Gray glass container covering the entire header group --- */
.projects-header-panel {
    width: calc(100% + 2vw) !important;
    max-width: calc(100% + 2vw) !important; 
    margin: 0 -1vw !important; /* Negative margin pulls the panel into the parent padding */
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers the intro bar */
    justify-content: center !important;
    padding: 2.5vh 0 !important;
    background: rgba(18, 22, 36, 0.65) !important; /* Semi-transparent gray glass */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-radius: 0 0 2vw 2vw !important; /* Rounded bottom corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

/* --- Detached Left-Aligned Header Logo inside Panel --- */
.landing-header {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centered vertically */
    left: 1.2vw !important;
    z-index: 12 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.header-logo-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: clamp(4px, 0.8vh, 10px) !important;
}

.landing-logo {
    width: clamp(40px, 4.5vw, 55px) !important;
    height: clamp(40px, 4.5vw, 55px) !important;
    animation: logoGlow 12s infinite alternate ease-in-out !important;
    margin-bottom: 0 !important;
}

.landing-header .rv-logo-fader {
    position: relative !important;
    height: clamp(10px, 1.2vw, 15px) !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.landing-header .fader-img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}

.landing-header .fader-img.layer {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
}

.landing-header .landing-subtitle {
    font-size: clamp(0.42rem, 0.5vw, 0.58rem) !important;
    color: var(--weiß) !important;
    letter-spacing: 0.25em !important;
    text-align: center !important;
    margin-right: -0.25em !important;
    white-space: nowrap !important;
    opacity: 0.8 !important;
}

/* --- Centered Transparent Non-Boxed Intro Bar inside Panel --- */
.projects-intro-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    padding: 0 4vw 0 280px !important; /* 280px left padding guarantees absolute clearance of the logo area */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-shrink: 0 !important;
}

.intro-icon,
.intro-icon path {
    fill: var(--grün) !important; /* Exact markengrün! */
}

.intro-icon-ring {
    width: clamp(65px, 7.5vw, 90px) !important;
    height: clamp(65px, 7.5vw, 90px) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(144, 194, 38, 0.45) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(10, 12, 18, 0.15) !important;
    box-shadow: 0 0 15px rgba(144, 194, 38, 0.05) !important;
    flex-shrink: 0 !important;
}

.intro-icon {
    width: 52% !important;
    height: 52% !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 8px rgba(144, 194, 38, 0.2)) !important;
    transform: translateY(-2px) !important;
}

.intro-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: left !important;
}

.intro-title {
    font-size: clamp(1.45rem, 1.95vw, 2.2rem) !important;
    font-weight: bold !important;
    color: var(--grün) !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
}

.intro-desc {
    font-size: clamp(0.78rem, 0.88vw, 0.95rem) !important;
    line-height: 1.5 !important;
    color: var(--weiß) !important;
    margin: 0 !important;
    text-align: left !important;
}

/* --- Offers Widescreen Content Container --- */
.angebot-container {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(32px, 5.5vh, 64px) !important; /* Elegant breathing room for transparent sections */
    width: 100% !important;
    max-width: 1200px !important; /* Increased for widescreen card grid spacing */
    margin: 2.5vh auto 4vh auto !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
}

.section-title {
    font-size: clamp(1.3rem, 1.7vw, 1.8rem) !important;
    color: var(--grün) !important;
    font-weight: bold !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}
.section-subtitle {
    font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important; /* Perfect size consistency with the rest of the page */
    line-height: 1.55 !important;
    color: var(--weiß) !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    max-width: 1000px !important; /* Generous expanded max-width remains */
    opacity: 0.85 !important; /* Perfectly matched opacity */
}/* --- Self-organizing Glass Grid --- */
.angebot-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(clamp(290px, 28vw, 360px), 1fr)) !important; /* Enlarged columns for square layout */
    gap: 28px !important;
    width: 100% !important;
}



.angebot-item {
    display: flex !important;
    flex-direction: column !important; /* Stack content vertically */
    align-items: stretch !important;
    gap: 16px !important;
    padding: 24px !important; /* Generous premium padding */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.0) 100%) !important; /* Frosted glass as in Bildpfade */
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Clean glass border as in Bildpfade */
    border-radius: 16px !important; /* Beautiful abgerundete Ecken */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important; /* Inset reflection shadow as in Bildpfade */
    transition: none !important; /* Completely static, non-clickable */
    position: relative !important;
    overflow: hidden !important;
}

/* Frosted Quartz grain texture matching Bildpfade perfectly */
.angebot-item::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.06 !important;
    background: 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") !important;
    pointer-events: none !important;
    mix-blend-mode: overlay !important;
    border-radius: inherit !important;
    z-index: 0 !important;
}
.angebot-thumb-container {
    width: 100% !important; /* Fluid width */
    aspect-ratio: 1 / 1 !important; /* Square aspect ratio to accommodate portrait and landscape photos perfectly */
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
.angebot-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.angebot-text {
    flex-grow: 1 !important; /* Align content across columns by pushing price to bottom */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: left !important;
    position: relative !important;
    z-index: 1 !important;
}
.angebot-title {
    font-size: clamp(1.1rem, 1.35vw, 1.35rem) !important;
    font-weight: bold !important;
    color: var(--grün) !important;
    margin: 0 !important;
}

.angebot-desc {
    font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
    line-height: 1.55 !important;
    color: var(--weiß) !important;
    margin: 0 !important;
}
.angebot-price-container {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(144, 194, 38, 0.3) !important; /* Premium brand green border */
    background: rgba(144, 194, 38, 0.05) !important; /* Premium brand green bg */
    align-self: flex-start !important; /* Sophisticated left-aligned badge */
    min-width: 80px !important;
    text-align: center !important;
    margin-top: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}
.angebot-price {
    font-size: clamp(1rem, 1.1vw, 1.15rem) !important;
    font-weight: bold !important;
    color: var(--grün) !important; /* Completely static brand green */
    margin: 0 !important;
    white-space: nowrap !important;
}

/* --- Premium Widescreen Glass Text Panels --- */
.text-block-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important; /* Perfect flush alignment with the grid bounds */
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.text-block-panel p {
    font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
    line-height: 1.55 !important;
    color: var(--weiß) !important;
    margin: 0 !important;
}

.text-block-panel .link {
    color: var(--grün) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.text-block-panel .link:hover {
    color: var(--orange) !important;
}

/* --- Workflow Sub-section grouping within Projects --- */
.workflow-sub-section {
    border-left: 4px solid var(--grün) !important;
    padding: 15px !important;
    margin-top: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

/* --- Workflow Custom Layout inside Panel --- */
.workflow-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: center !important;
    width: 100% !important;
}

.workflow-thumb-container {
    width: 270px !important;
    height: 180px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.workflow-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.workflow-content:hover .workflow-thumb {
    transform: scale(1.06) !important;
}

.workflow-badge {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    background: rgba(12, 16, 28, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--grün) !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    letter-spacing: 0.02em !important;
}

.workflow-text {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.workflow-btn, .panel-btn {
    padding: clamp(6px, 0.8vh, 10px) clamp(16px, 1.8vw, 26px) !important;
    border: 1px solid rgba(144, 194, 38, 0.4) !important;
    background: rgba(112, 128, 144, 0.15) !important;
    border-radius: 50px !important;
    color: var(--grün) !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    transition: all 0.45s ease !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.workflow-btn {
    display: inline-block !important;
    text-align: center !important;
}

.panel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.workflow-btn:hover, .panel-btn:hover {
    color: var(--orange) !important;
    background: rgba(112, 128, 144, 0.25) !important;
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.15) !important;
}

.panel-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--grün) !important;
    transition: fill 0.3s ease !important;
    flex-shrink: 0 !important;
}

.panel-btn:hover svg {
    fill: var(--orange) !important;
}

/* --- Footer Alignment --- */
.landing-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 4vh auto 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 1vw !important;
    flex-shrink: 0 !important;
}

.footer-meta {
    grid-column: 1 !important;
    display: flex !important;
    gap: clamp(8px, 1.2vw, 20px) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.footer-copyright {
    grid-column: 2 !important;
    text-align: center !important;
}

.footer-link {
    display: flex !important;
    align-items: center !important;
    gap: clamp(4px, 0.5vw, 8px) !important;
    text-decoration: none !important;
    color: var(--grün) !important;
    font-size: clamp(0.6rem, 0.75vw, 0.8rem) !important;
    transition: all 0.3s ease !important;
}

.footer-icon {
    width: clamp(14px, 2.2vh, 20px) !important;
    height: clamp(14px, 2.2vh, 20px) !important;
    object-fit: contain !important;
}

.footer-link:hover {
    color: var(--orange) !important;
    transform: translateX(5px) !important;
}

.lang-switch {
    display: flex !important;
    gap: 2px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 50px !important;
    padding: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.lang-btn {
    display: flex !important;
    align-items: center !important;
    gap: clamp(4px, 0.5vw, 8px) !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    border: none !important;
    background: transparent !important;
    color: var(--grün) !important;
    font-family: inherit !important;
    font-size: clamp(0.6rem, 0.75vw, 0.8rem) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.lang-btn.active {
    background: rgba(144, 194, 38, 0.18) !important;
    color: var(--grün) !important;
}

.lang-btn:hover:not(.active) {
    color: var(--orange) !important;
}

/* =================== RESPONSIVE OVERRIDES =================== */

@media (max-width: 768px) {
    .landing-overlay {
        padding: 1.5vh 4vw !important;
        gap: 15px !important;
    }

    .projects-header-panel {
        width: calc(100% + 8vw) !important;
        margin: -1.5vh -4vw 15px -4vw !important;
        background: rgba(18, 22, 36, 0.65) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 24px 16px 16px 16px !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }
    
    .landing-header {
        position: static !important;
        transform: none !important;
        margin: 0 auto 10px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .projects-intro-bar {
        flex-direction: row !important; /* Row flow on mobile */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        padding: 12px 4vw !important;
        text-align: left !important;
        height: auto !important;
    }
    .intro-icon-ring {
        width: clamp(55px, 10vw, 70px) !important;
        height: clamp(55px, 10vw, 70px) !important;
    }
    
    .intro-icon {
        width: 52% !important;
        height: 52% !important;
    }
    
    .intro-title {
        font-size: clamp(1.2rem, 3.8vw, 1.45rem) !important;
    }
    
    .intro-desc {
        font-size: clamp(0.72rem, 2.4vw, 0.85rem) !important;
        line-height: 1.4 !important;
    }

    .angebot-container {
        padding: 0 0 40px 0 !important; /* Bottom spacing */
        gap: 24px !important;
    }

    .angebot-list {
        grid-template-columns: 1fr !important;
    }

    .angebot-item {
        padding: 16px !important;
    }

    .workflow-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .workflow-thumb-container {
        width: 100% !important;
        height: 200px !important;
    }

    .landing-footer {
        padding-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .footer-meta {
        justify-content: center !important;
        width: 100% !important;
    }
}