:root {
    --color-cyan: #00e5ff;
    --color-neon-pink: #ff007f;
	--color-neon-yellow: #ffff00;
    --color-neon-orange: #ff6600;
}


#menu_bar_background {
  background-color: var(--infinite_gray_dark);
}

.topframe_menubar_sub a {
    background-color: var(--infinite_gray_dark) !important;
}

.topframe_menubar_sub a:hover {
    background-color: #ffffff !important;
    color: var(--infinite_gray_dark) !important;
}

/* --- HERO BEREICH AUF CASE-SEITEN NEU GEDACHT --- */

.page-cases .top_frame_container {
    display: block !important;
    width: 100%;
}

/* --- HERO BEREICH AUF CASE-SEITEN NEU GEDACHT --- */

.page-cases #top_frame {
    height: 100vh !important;
    min-height: 780px !important;
    position: relative;
    z-index: 1;
    background-image: none !important; 
    background-color: var(--infinite_gray_light) !important;
    overflow: hidden;
    display: block !important; /* WICHTIG: Kein Flexbox auf dem Parent! */
}

/* Der Blur-Layer bleibt auf dem top_frame */
.page-cases #top_frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: 
        linear-gradient(to bottom, transparent 0%, var(--infinite_gray_light) 75%), 
        url('../graphics/agentur-infinite-arbeiten-case-studies-background.webp');
    background-size: cover; 
    background-position: top center;
    background-repeat: no-repeat;
    
    filter: blur(6px); 
    transform: scale(1.02); 
	opacity: 0.75;
    
    z-index: -1;
    pointer-events: none;
}

/* 
  Hier passiert die Magie: Der Container nutzt 100vh und zentriert den Text.
  Das padding-top: 100px schiebt alles exakt nach unten (Menüausgleich).
*/
.page-cases .top_frame_container {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
    
    height: 100vh !important;
    min-height: 780px !important;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    
    padding-top: 100px !important; /* Der exakte Versatz nach unten */
    box-sizing: border-box;
}

/* Die Typografie (doppelte Wrapper wurden gelöscht) */
.case_detail_h1 {
    font-family: 'Unageo', sans-serif;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--infinite_gray_dark);
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: none;
}

.case_detail_h2 {
    font-family: 'Unageo', sans-serif;
    font-size: 104px;
    line-height: 110%;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-transform: none;
    text-shadow: none;
    max-width: 100%;
    
    /* --- HIER STARTET DER FLUID-GRADIENT-EFFEKT --- */
    background: linear-gradient(270deg, #ffffff, var(--color-neon-pink), var(--color-cyan), #ffffff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fluidGradient 6s ease infinite;
}

@keyframes fluidGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.case_detail_intro {
    font-family: 'Unageo', sans-serif;
    font-size: 25px;
    line-height: 150%;
    font-weight: 300;
    color: var(--infinite_gray_dark);
    margin: 0 0 40px 0;
}

/* --- CONTENT BEREICH --- */

.page-cases #content_frame {
    position: relative;
    z-index: 0;
}

.page-cases #page_container {
    margin-top: 0;
}

.case_detail_page {
    background-color: var(--infinite_gray_light) !important;
}

/* Bilder Setup */
.case_detail_image_wrapper img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0px 15px rgba(0,0,0,0.15);
    display: block;
}

/* Die 2-spaltigen Bilder nebeneinander */
.case_detail_2col_images {
    display: flex;
    gap: 40px;
    width: 100%;
}

.case_detail_2col_images .case_detail_image_wrapper {
    flex: 1; /* Beide Boxen nehmen exakt 50% Platz ein */
}

/* Textblöcke (NEU: Flexbox 2-Spaltig) */
.case_detail_text_block {
    display: flex;
    gap: 30px;
    align-items: center; /* Vertikale Zentrierung */
    width: 100%;
    text-align: left;
}

/* Modifikator für abwechselndes Layout (Bild/Text getauscht) */
.text_block_reverse {
    flex-direction: row-reverse;
}

/* H3 und Text teilen sich den Platz exakt 50/50 */
.case_detail_text_block > * {
    flex: 1;
    min-width: 0; /* Verhindert Layout-Sprengung bei langen Wörtern */
}

.case_detail_h3 {
    font-family: 'Unageo', sans-serif;
    font-size: 46px;
    line-height: 110%;
    font-weight: 800;
    color: var(--infinite_gray_dark);
    margin: 0; /* Margin-bottom entfernt, da Text daneben steht */
    text-transform: uppercase;
}

.case_detail_p {
    line-height: 150%;
    color: var(--infinite_gray_dark);
    margin: 0;
}

/* Neues 4er Bilder-Grid */
.case_detail_4col_images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
}

.case_detail_4col_images .case_detail_image_wrapper {
    width: 100%;
}

.case_detail_button_wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.case_detail_button {
    display: inline-block;
    padding: 20px 45px;
	width: 100%;
    color: #ffffff !important;
    font-family: 'Unageo', sans-serif;
    font-size: 24px;
    font-weight: 400;
	line-height: 1.25;
    text-transform: uppercase;
	text-align: center;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 4px;
    
    /* Dynamischer Gradient Setup */
    background-image: linear-gradient(
        to right, 
        var(--infinite_gray_dark) 0%, 
        var(--infinite_gray_dark) 50%, 
        var(--color-cyan) 75%, 
        var(--color-neon-pink) 100%
    );
    background-size: 200% auto;
    background-position: left center;
    
    /* Smoother Übergang für Background und leichtes Anheben */
    transition: background-position 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease;
}

.case_detail_button:hover {
    background-position: right center;
    transform: scale(1.02); /* Hebt den Button beim Hover leicht an */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5); /* Cyaner Glow passend zum Gradient */
}

/* ================= MOBILE ANPASSUNGEN ================= */

@media screen and (max-width: 1440px) {
    .top_frame_menubar {
        background-color: var(--infinite_gray_dark);
    }
    
    .top_frame_menubar a {
        background-color: var(--infinite_gray_dark);
    }
    
    .top_frame_menubar a:hover, .top_frame_menubar a.active {
        color: var(--infinite_gray_dark) !important;
    }	
}

@media screen and (max-width: 1000px) {
    .case_detail_h2 { font-size: 40px; }
    .case_detail_h3 { font-size: 34px; margin-bottom: 10px; }
    .case_detail_intro { font-size: 18px; }
    
    /* Textblöcke auf Mobile untereinander (ohne reverse) */
    .case_detail_text_block, 
    .case_detail_text_block.text_block_reverse {
        flex-direction: column !important;
        gap: 20px;
    }
    
    /* Bilder bei <1000px untereinander bzw. 2-spaltig */
    .case_detail_2col_images {
        flex-direction: column;
        gap: 40px;
    }
    
    .case_detail_4col_images {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* Reduzierter Abstand für kompaktere Ansicht */
    }
    
    .case_detail_2col_images .lightbox-trigger,
    .case_detail_4col_images .lightbox-trigger {
        pointer-events: none;
    }
}

@media screen and (max-width: 600px) {
    .case_detail_h1 { font-size: 22px; }
    .case_detail_h3 { font-size: 26px; }
    
    /* 4er Grid auf Mobile komplett untereinander */
    .case_detail_4col_images {
        grid-template-columns: 1fr;
    }
	.case_detail_button {
	  padding: 12px 45px;
	  font-size: 17.4px;
	}
}