/* Moderne CSS-Variablen (Custom Properties) für bessere Wartbarkeit */
:root {
    --gap-desktop: 1px;
    --gap-mobile: 1px;
    --card-height-desktop: 400px;
    --card-height-mobile: 195px;
    --shadow-color: rgba(13, 49, 70, 0.75);
    --name-font: 'Yeseva One', cursive;
    --text-color: #FFFFFF;
}

/* --- Allgemeine Galerie-Einstellungen --- */
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

#galerie {
    width: 100%;
    padding-top: 81.5px; /* Abstand zur Navigationsleiste */
    
    /* CSS Grid für Desktop: 3 Spalten */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px var(--gap-desktop); /* Vertikaler und Horizontaler Abstand */
}

.gallery-link,
.gallery-link:hover,
.speisenname {
    text-decoration: none !important; 
}

/* --- Allgemeine Stil-Definition für ALLE Karten (Standard/Desktop) --- */
.gallery-card {
    /* Diese Höhe (500px) ist der Standard und gilt für Desktop */
    height: var(--card-height-desktop); /* 500px */
    
    position: relative;
    overflow: hidden; 
    
    transition: box-shadow 0.3s;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    
    /* Flex-Eigenschaften für Text-Overlay */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	isolation: isolate; 
}

/* Stilisiert das Bild (dank <picture>) als Hintergrund */
.gallery-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Allgemeine Hover-Definition für ALLE Karten */
.gallery-card:hover {
    box-shadow: 0 0 33px var(--shadow-color);
    transition: box-shadow 0.3s;
}

.gallery-card:hover img {
    transform: scale(1.05); 
}

.gallery-featured {
    /* Spannt das Element von der Startlinie 1 bis zur Endlinie 4 (3 Spalten) */
    grid-column: 1 / 3;
	
}


.highlight{
    bottom: 0;
    width: 100%;
	background: linear-gradient(to top, rgba(3, 12, 18, 0.87) 0%, transparent 100%);
	z-index: 1;

}

.highlight h1 {
	color: #FFFFFF;
	font-family: 'Yeseva One', cursive;
	font-size: 4em;
	text-align: center;
	margin-top: 0;
	z-index: 5;
	letter-spacing: -0.01em;
	

}

.highlight h2 {
	color: #FFFFFF;
	font-size: 1.7em;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	text-align: center;
	margin: -0.5em;
	z-index: 5;
}

.highlight h3 {
	mix-blend-mode: screen;
	position: relative;
	z-index: 2;
	font-size: 1.6em;
	text-align: center;
	margin: 0em;
  	background-color: white;
	color:#8C4800;
	text-transform: uppercase;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	font-family: 'Yeseva One', cursive;
	transform: rotate(-2deg);
	
}


/* --- Speisenname-Overlay --- */

.speisenname {
    position: relative; 
    z-index: 2;
	color: var(--text-color);
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    font-family: var(--name-font);
    font-size: 2.4em; /* Desktop-Schriftgröße */
    text-align: center;
    text-shadow: 0px 3px 15px #002230;
	padding-bottom: 48px;
	line-height: 1.2em;
}

/* ================================================= */
/* ANPASSUNG FÜR TABLET (iPad etc. 768px bis 1024px) */
/* ================================================= */

@media only screen and (min-width: 768px) and (max-width: 990px) {
    
    :root {
        /* Optional: Eine mittlere Kartenhöhe für Tablets definieren */
        --card-height-tablet: 300px;
    }

    #galerie {
        /* 3 Spalten sind ideal für die iPad-Breite */
        grid-template-columns: repeat(3, 1fr) !important;
        padding-top: 82px;
        gap: var(--gap-desktop);
    }

    .gallery-card {
        height: var(--card-height-tablet);
    }

    /* Korrektur für das Featured-Element: 
       Da wir nun 3 Spalten haben, sollte das Highlight 2 Spalten breit sein */
    .gallery-featured {
        grid-column: span 2;
    }

    /* Schriftgrößen-Anpassung für Tablet */
    .speisenname {
        font-size: 1.8em;
        padding-bottom: 30px;
    }

    .highlight h1 {
        font-size: 3.5em;
    }

    .highlight h2 {
        font-size: 1.4em;
    }

    .highlight h3 {
        font-size: 1.4em;
        width: 60%; /* Etwas breiter als auf Desktop, damit der Text Platz hat */
    }
}

/* ================================================= */
/* ANPASSUNG FÜR MOBILE ANSICHT (Screens bis 767px)  */
/* ================================================= */
@media only screen and (max-width: 767px) {
	
	body {
		width: 100%;
	}
    
    /* 1. Galerie-Darstellung auf 2 Spalten setzen */
    #galerie { 
		/* minmax(0, 1fr) ersetzt das einfache 1fr, damit die Spalten exakt gleich bleiben */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		padding-top: 82px;
		gap: var(--gap-mobile);
		margin-bottom: 2px; }

    /* 2. Kartenhöhe auf Mobile-Wert reduzieren */
    .gallery-card {
        height: var(--card-height-mobile); /* Mobile Höhe (195px) */
    }
    
    /* 3. Bild- und Text-Anpassungen */
    .gallery-card img {
        transform: scale(1); /* Hover-Zoom entfernen */
    }

    .speisenname {
        font-size: 1.3em; /* Mobile Schriftgröße */
        padding-bottom: 15px; 
    }
    
    .gallery-link {
        display: block; 
    }
    
    /* Mobile Styles für Highlights (wenn im Code vorhanden) */
    .gallery-featured {
        /* Spannt das Element über die beiden verfügbaren Mobile-Spalten */
        grid-column: 1 / 3;
    }

    /* Allgemeine Anpassung für den Highlight-Container */
    .highlight {
        /* Optional: Reduziert den unteren Abstand, falls nötig */
        padding-bottom: 0;
    }

    /* 1. Hauptüberschrift (h1) */
    .highlight h1 {
        /* Deutliche Reduzierung der Schriftgröße von 6.5em auf etwa 3.0em */
        font-size: 3.0em;
        /* Falls Sie h1 und h2 näher zusammenrücken möchten: */
        margin-top: 1px;
		letter-spacing: -0.05em;
    }

    /* 2. Unterüberschrift (h2) */
    .highlight h2 {
        /* Reduzierung der Schriftgröße von 2em auf etwa 1.2em */
        font-size: 1.2em;
        margin: 0; /* Entfernt den negativen Margin (-0.5em) */
    }

    /* 3. Hervorgehobener Tag (h3) */
    .highlight h3 {
        /* Reduzierung der Schriftgröße von 2em auf etwa 1.4em */
        font-size: 1.2em;
        
        /* Die Breite wird von 30% auf einen fixen Wert oder max-content umgestellt,
           damit es auf Mobile nicht zu schmal wird */
        width: max-content; /* Passt die Breite an den Text an */
        padding: 5px 10px; /* Fügt etwas Luft um den Text hinzu */
        
        /* Reduziert den unteren Rand */
        margin-bottom: 5px;
        
        /* Zentrierung bleibt erhalten, da margin-left/right: auto gesetzt ist */
        margin-left: auto;
        margin-right: auto;
    }
}