:root {
    /* Abstand zwischen den Kacheln */
    --gap: 30px; 
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    padding: 3%;
    background-color: #e8e8e8;
    color: #484848;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

/* =========================================
   RESPONSIVES GRID (Handy -> Tablet -> PC)
   ========================================= */

/* STANDARD: Mobile (2 Kacheln nebeneinander) */
.tile {
    /* 50% Breite minus die Hälfte des Abstands */
    z-index: 10;
	width: calc(50% - (var(--gap) / 2));
    height: 250px;
    background: #e0e0e0;
    border-radius: 25px;
	 background: #e0e0e0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.6s ease;
	
	   box-shadow: 10px 8px 20px #bebebe,
               -10px -10px 20px #ffffff;
}

.tile:hover{
		z-index: 10;
	    box-shadow: 12px 12px 24px #bebebe,
               -12px -12px 24px #ffffff;
}

/* Breite Kacheln sind auf dem Handy 100% breit */

/* Flexbox auf "Spalte" umstellen (Elemente liegen übereinander) */
.tile.size-m {
    flex-direction: column;
}

/* Das Video nimmt anfangs die vollen 250px Höhe ein */
.tile.size-m .media-wrapper {
    width: 100%;
    height: 100%;
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Der Textbereich ist anfangs 0 Pixel hoch (unsichtbar) */
.tile.size-m .text-content {
    width: 100%;
    height: 0px; 
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease 0.2s;
}

/* Der innere Text braucht hier keine feste Breite mehr */
.tile.size-m .text-inner {
    width: 100%; 
    height: 100%;
}

/* --- WENN DIE BREITE KACHEL GEKLICKT WIRD --- */

.tile.size-m.expanded {
    width: 100%;   /* Nimmt die ganze Bildschirmbreite ein */
    height: 750px; /* Kachel verdoppelt ihre Höhe (250px Video + 250px Text) */
}

/* Video bleibt oben und behält seine 250px Höhe */
.tile.size-m.expanded .media-wrapper {
    width: 100% !important; /* Ignoriert die JS-Breitensperre, da wir vertikal animieren */
    height: 500px; 
}

/* Textbereich fährt nach unten aus und nimmt die restlichen 250px ein */
.tile.size-m.expanded .text-content {
    width: 100%;
    height: 250px; 
}

/* TABLET (Ab 768px): 3 Kacheln nebeneinander */
@media (min-width: 768px) {
    :root { --gap: 30px; } /* Etwas mehr Abstand auf größeren Screens */
    .tile { width: calc(33.333% - (var(--gap) * 2 / 3)); }
    .tile.size-m { width: calc(66.666% - (var(--gap) / 3)); }
}

/* DESKTOP (Ab 1024px): 4 Kacheln nebeneinander */
@media (min-width: 1024px) {
    .tile { width: calc(25% - (var(--gap) * 3 / 4)); }
    .tile.size-m { width: calc(50% - (var(--gap) / 2)); }
}

/* =========================================
   INNERE ELEMENTE (Video & Text)
   ========================================= */

.media-wrapper {
    /* Startet mit 100% Breite der jeweiligen Kachel */
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.media-wrapper video, 
.media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Der Textbereich ist am Anfang unsichtbar (Breite 0) */
.text-content {
    width: 0px; 
    opacity: 0;
    overflow: hidden;
    background: #e7e7e7;
    flex-shrink: 0;
    /* Leicht verzögerte Sichtbarkeit für schöneren Effekt */
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease 0.2s;
}

/* Dieser Container sorgt dafür, dass der Text beim Aufklappen nicht gequetscht wird */
.text-inner {
    width: 100%; /* Feste Mindestbreite, damit der Text sofort schön formatiert ist */
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* =========================================
   ERWEITERTER ZUSTAND (nach dem Klick)
   ========================================= */

/* Kachel nimmt nun 100% des Bildschirms ein (Höhe bleibt gleich!) */
.tile.expanded {
    width: 100%;
	z-index: 1;
	
	    box-shadow: 12px 12px 24px #bebebe,
               -12px -12px 24px #ffffff;
}

/* Das Video übernimmt die im JS gemessene Pixel-Breite (--locked-width) */
.tile.expanded .media-wrapper {
    width: var(--locked-width);
}

/* Der Text bekommt den exakten Rest des Platzes */
.tile.expanded .text-content {
    width: calc(100% - var(--locked-width));
    opacity: 1;
}