/* ==========================================================================
   Layout & Grid (Masonry)
   ========================================================================== */
#gw-works-app { 
	width: 100%;
    max-width: 100%; 
	display: block;
    margin: 0 auto; 
    padding: 0;
    font-family: "Poppins", sans-serif; 
}

.gw-masonry-grid { 
    column-count: 5; 
    column-gap: 20px; 
    width: 100%; 
}

@media (max-width: 1400px) { .gw-masonry-grid { column-count: 4; } }
@media (max-width: 1100px) { .gw-masonry-grid { column-count: 3; } }
@media (max-width: 800px) { .gw-masonry-grid { column-count: 2; } }

.gw-work-card { 
    break-inside: avoid; 
    display: block; 
    width: 100%; 
    margin-bottom: 20px; 
    cursor: pointer; 
    background: var(--e-global-color-primary);
}

.gw-work-inner { 
    position: relative; 
    display: block; 
    line-height: 0; 
    overflow: hidden;
}

.gw-work-inner img { 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: transform 0.5s ease; 
}

/* Hover-Effekt Galerie */
.gw-hover-overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(51, 51, 51, 0.85); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 15px; 
    box-sizing: border-box; 
}

.gw-work-card:hover .gw-hover-overlay { opacity: 1; }
.gw-work-card:hover img { transform: scale(1.04); }

.gw-hover-content h3 { 
    font-family: "Bricolage Grotesque", sans-serif; 
    color: #ffffff !important; 
    font-size: 28px !important; 
    margin: 0 0 20px 0 !important; 
    font-weight: bold !important; 
    line-height: 1.3 !important; 
    text-transform: none !important; 
}

.gw-hover-content p { 
    color: #fff !important; 
    font-size: 14px !important; 
    margin: 0 !important; 
    text-transform: uppercase !important; 
    opacity: 0.9 !important; 
    font-family: "Bricolage Grotesque", sans-serif; 
	line-height: 1.3em;
}

/* ==========================================================================
   Slider & Lightbox (Optimiert auf 95vh)
   ========================================================================== */
#gw-lightbox { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 999999; display: flex; align-items: center; justify-content: center; 
    overflow: hidden; 
}

.gw-lightbox-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #333; /* Fallback */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(10px) brightness(0.5); 
    transform: scale(1.1); 
}

.gw-lb-nav-container { 
    position: relative; width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center; z-index: 10000;
}

/* Buttons Basis-Stil */
.gw-nav-btn, .gw-close { 
    position: absolute;
    background-color: #ffffff !important; 
    width: 48px; height: 48px; border-radius: 50%; border: none !important; 
    cursor: pointer; display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.2s ease;
    z-index: 10001;
}

.gw-nav-btn::before, .gw-close::before {
    content: ""; display: block; width: 20px; height: 20px; 
    background-color: var(--e-global-color-primary);
    -webkit-mask-size: contain; mask-size: contain; 
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    transition: background-color 0.2s ease;
}

.gw-nav-btn:hover, .gw-close:hover { 
    background-color: var(--e-global-color-accent) !important; 
}

.gw-nav-btn:hover::before, .gw-close:hover::before {
    background-color: #ffffff; 
}

#gw-prev-btn { left: 40px; top: 50%; transform: translateY(-50%); }
#gw-next-btn { right: 40px; top: 50%; transform: translateY(-50%); }
#gw-prev-btn::before { -webkit-mask-image: url('../assets/caret-left.svg'); }
#gw-next-btn::before { -webkit-mask-image: url('../assets/caret-right.svg'); }

.gw-close { top: 30px; right: 30px; }
.gw-close::before { -webkit-mask-image: url('../assets/close.svg'); width: 24px; height: 24px; }

.gw-lightbox-content { 
    position: relative; 
    width: 90%; 
    max-width: 1100px; 
    height: 100vh; 
    background: #494747; 
    padding: 30px 40px; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto;
}

.gw-lb-top-bar { 
    display: block; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 6px; 
    flex-shrink: 0; 
	text-align: center;
}

.gw-status-dot { width: 14px; height: 14px; border-radius: 50%; }
#gw-lb-counter { font-size: 14px; color: #fff; }

.gw-img-wrapper { 
    flex-grow: 1; 
    display: flex; 
    align-items: end; 
    justify-content: center; 
    margin-bottom: 20px; 
    min-height: 0; 
    position: relative; 
    overflow: hidden;
}

#gw-lb-img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    transition: transform 0.3s ease-in-out, opacity 0.3s; 
}

#gw-lb-img.gw-is-switching { 
    transform: translateX(-30px); opacity: 0; 
}

.gw-lb-info-footer { 
    text-align: center; 
    flex-shrink: 0; 
}

#gw-lb-title { 
    font-family: "Bricolage Grotesque", serif; 
    font-size: 34px; 
    margin: 0 0 15px; 
    color: #fff; 
    font-weight: 200;
	text-align: left;
}

#gw-toggle-info { 
    border: 1px solid var(--e-global-color-accent) !important;
    color: #fff; 
    border-radius: 30px; 
    padding: 10px 25px; 
    cursor: pointer; 
    text-transform: uppercase; 
    font-size: 16px; 
    border: none; 
}

#gw-toggle-info:hover { 
    background: var(--e-global-color-accent);
}

/* ==========================================================================
   Details & Social Share
   ========================================================================== */
.gw-lb-details { 
    text-align: left; 
}

.gw-lb-flex-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.gw-lb-table-side {
    flex: 1.2;
}

.gw-lb-content-side {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    padding-left: 20px;
}

#gw-lb-editor-text p {
    margin-bottom: 15px;
}

.gw-lb-row { 
    display: flex; 
    padding: 10px 0; 
    border-bottom: 1px solid #eaeaea50; 
    font-size: 14px; 
	color: #fff;
}

.gw-lb-label { min-width: 140px; font-weight: bold; color: #fff; }


/* Social Share Styling */
.gw-share {
    margin-top: 10px;
}

.gw-share-buttons {
    display: flex;
    gap: 12px;
}

.gw-cta-btn {
	background: var(--e-global-color-accent);
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	height: 40px !important;
	padding: 8px 20px !important;
	text-transform: uppercase !important;
}

.gw-share-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--e-global-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    text-decoration: none !important;
}

.gw-share-icon:hover {
    background-color: var(--e-global-color-accent);
}

.gw-share-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* SVG Masks for Social Icons */
.wa::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.1 0-65.6-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.2-3.2-5.6-.3-8.6 2.4-11.3 2.5-2.4 5.5-6.5 8.3-9.7 2.8-3.3 3.7-5.6 5.5-9.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.3 5.7 23.6 9.1 31.7 11.7 13.3 4.2 25.4 3.6 35.2 2.1 10.8-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>'); }
.fb::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>'); }
.mail::before { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>'); }

/* ==========================================================================
   Responsive Korrekturen
   ========================================================================== */
@media (max-width: 900px) {
    .gw-lb-flex-container {
        flex-direction: column;
        gap: 20px;
    }
    .gw-lb-content-side {
        border-left: none;
        padding-left: 0;
        border-top: 0;
        padding-top: 0;
    }
	.gw-lb-table-side {
		width: 100%;
	}
}

@media (max-width: 800px) {
    .gw-nav-btn { width: 40px; height: 40px;  }
    #gw-prev-btn { left: 4px; }
    #gw-next-btn { right: 4px; }
    .gw-close { top: 10px; right: 10px; }
    .gw-lightbox-content { padding: 20px; width: 100%; height: 100dvh; }
    #gw-lb-title { font-size: 22px; }
	#gw-search, .gw-ajax-filter { height: 40px !important; }
	.gw-hover-overlay { padding: 8px !important; }
	.gw-hover-content h3 { font-size: 18px !important; }
}