.img-hover {
    background-color: transparent;
    display: block;
}


.content-header{
	background: linear-gradient(
    0deg,
    rgba(143, 143, 143, 0.1) 0%,
    rgba(255, 255, 255, 0.6) 100%
);

	align-content:center;
	align-items:center;
}

.content-body{
	background: linear-gradient(
    0deg,
    rgba(143, 143, 143, 0.1) 0%,
    rgba(255, 255, 255, 0.6) 100%
);



	align-content:center;
	align-items:center;
	min-height:100%;
	height:100vh;
}

.container {
	align-items:center;
    position: relative;
    max-width: 100%; /* ggf. auf 100% + max-width umstellen */
	width:400px;
    cursor: pointer;
    overflow: hidden;
	border-radius: 10px;
    border: 2px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	align-content:center;
	padding:auto;
	margin:auto;
    
}

/* Bild */
.container img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
	
}

/* Overlay = Grid mit 3 Reihen: 0–33%, 33–50%, 50–100% */
.overlay {
	background-color:red;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 33% 17% 50%;
    background: rgba(255,255,255,0.85);
    border: 1px solid #ddd;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Gemeinsamer Text-Container – füllt die Grid-Zellen in der Breite */
.text-box {
    display: contents; /* Kinder direkt im Grid positionieren */
	height:100%;
}

/* Überschrift: im oberen Drittel, am unteren Rand ausrichten */
.text-box h2 {
	margin-top: 5%;
    grid-row: 1;                 /* oberes Drittel */
    align-self: end;             /* am unteren Rand von Row 1 */
    justify-self: center;
    margin: 0;
    padding: 0 12px;
    text-align: center;
    font-size: 22px;
    color: #333;
    opacity: 0;
    transition: opacity 0.35s ease 0.12s;
}

/* Absatz: ab 50% (unteres Raster) starten */
.text-box p {
    grid-row: 3;                 /* ab Hälfte */
    align-self: start;           /* am Anfang von Row 3 */
    justify-self: center;
    margin-top: 10px;
    padding: 0 16px;
    max-width: 90%;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    color: #555;
    opacity: 0;
    transition: opacity 0.35s ease 0.22s;
	min-height:100%;
	font-size:16px;
}

/* Hover-Effekt */
.container:hover img {
    transform: scale(1.05);
    filter: brightness(0.85);
}
.container:hover .overlay { opacity: 1; }
.container:hover .overlay .text-box h2,
.container:hover .overlay .text-box p { opacity: 1; }

/* Optional: responsive */
@media (max-width: 520px){
    .container{ width: 100%; max-width: 400px; }
    .text-box h2{ font-size: 20px; }
    .text-box p{ font-size: 14px; }
}