/* Portfolio – Masonry (5 Spalten, Querformate über 2 Spalten) + Lightbox – Chidisign Child */

.pf-grid{ position: relative; margin: 0; --pf-gap: 28px; }

/* Spaltenbreite: 5 Spalten, Abstand = --pf-gap */
.pf-grid-sizer,
.pf-card{ width: calc((100% - 4 * var(--pf-gap)) / 5); }
.pf-card.pf-wide{ width: calc((100% - 4 * var(--pf-gap)) / 5 * 2 + var(--pf-gap)); }

@media (max-width: 1200px){
	.pf-grid-sizer,.pf-card{ width: calc((100% - 3 * var(--pf-gap)) / 4); }
	.pf-card.pf-wide{ width: calc((100% - 3 * var(--pf-gap)) / 4 * 2 + var(--pf-gap)); }
}
@media (max-width: 900px){
	.pf-grid-sizer,.pf-card{ width: calc((100% - 2 * var(--pf-gap)) / 3); }
	.pf-card.pf-wide{ width: calc((100% - 2 * var(--pf-gap)) / 3 * 2 + var(--pf-gap)); }
}
@media (max-width: 600px){
	.pf-grid-sizer,.pf-card{ width: calc((100% - 1 * var(--pf-gap)) / 2); }
	.pf-card.pf-wide{ width: 100%; }
}
@media (max-width: 400px){
	.pf-grid-sizer,.pf-card{ width: 100%; }
	.pf-card.pf-wide{ width: 100%; }
}

.pf-card{
	margin-bottom: var(--pf-gap);
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background:#fff;
	box-shadow:0 1px 2px rgba(0,0,0,.06);
	transition: transform .25s ease, box-shadow .25s ease;
	cursor: zoom-in;
	text-decoration:none;
	display:block;
	font-size: 0;     /* tilgt jeglichen Inline-Spalt unter dem Bild */
	line-height: 0;
}
.pf-card:hover{ transform: translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.14); }
.pf-card img,
.pf-card .pf-img{ width:100%; height:auto; display:block !important; margin:0 !important; padding:0 !important; border:0; vertical-align:bottom; }

/* Bildunterschrift im Raster ausgeblendet – Titel erscheint nur in der Lightbox */
.pf-cap{ display:none !important; }

/* ===== Lightbox: heller Hintergrund, Bild mittig, Titel mittig darunter ===== */

/* 1) Heller Hintergrund */
.glightbox-container .goverlay{ background:#f5f5f5 !important; }

/* 2) Steuer-Symbole dunkel (auf Weiß sichtbar) */
.glightbox-container .gclose svg path,
.glightbox-container .gnext svg path,
.glightbox-container .gprev svg path{ fill:#16292b !important; }
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev{ background:rgba(0,0,0,.06) !important; opacity:1 !important; }

/* 3) Bild + Titel als zentrierte Spalte (Titel immer mittig UNTER dem Bild) */
.glightbox-container .gslide-inner-content{ flex-direction:column !important; }
.glightbox-container .gslide-media{ order:1 !important; box-shadow:none !important; }
.glightbox-container .gslide-description{ order:2 !important; }

/* 4) Einheitliche Bildgröße, zentriert – gleichmäßiger Rand ringsum */
.glightbox-clean .gslide-image img,
.glightbox-container .gslide-image img{
	max-height:76vh !important; max-width:86vw !important;
	width:auto !important; height:auto !important; margin:0 auto !important;
}

/* 5) Titel mittig, dunkel auf hell, transparenter Hintergrund */
.glightbox-clean .gslide-description,
.glightbox-container .gslide-description,
.gslide-description{
	display:block !important; position:relative !important;
	background:transparent !important; text-align:center !important;
}
.glightbox-container .gdesc-inner{
	position:relative !important; height:auto !important; overflow:visible !important;
	padding:34px 20px 16px !important; text-align:center !important;
}
.glightbox-container .gslide-title{
	color:#16292b !important; font-family:inherit !important;
	font-size:15px !important; font-weight:300 !important; line-height:1.4 !important; margin:0 !important;
}
.glightbox-container .gslide-desc{ color:#5a6b6d !important; }
