/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/
/* ==========================================================================
   1. GLOBALE EINSTELLUNGEN & VARIABLEN
   ========================================================================== */
:root {
    --gold-color: #897140;
    --text-color: #333d42;
    --frame-color: rgba(40, 40, 40, 0.9);
    --frame-thickness: 60px;
}

body {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
}

a:hover {
	text-decoration: none;
}


/* Der Container für das Hintergrundbild */
.fl-page-content {
    position: relative;
    background-image: url(https://neu.jante-restaurant.de/wp-content/uploads/2026/04/background_09_b005c5e660-scaled.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
}

body.page-id-241 .fl-page-content, body.page-id-311 .fl-page-content {
    position: relative;
    background-image: url(https://neu.jante-restaurant.de/wp-content/uploads/2026/04/bg_studio-scaled.avif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: 0;
}

/* Das Overlay als eigene "Ebene" */
.fl-page-content::before {
    content: "";
    position: fixed; /* Bleibt wie der Hintergrund fixiert */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(213, 219, 217, 0.8), rgba(213, 219, 217, 0.8));
    
    /* Hier steuerst du das "Fließen" */
    opacity: 0; 
    transition: opacity 2.0s ease-in-out; /* 2 Sekunden Dauer für den Übergang */
    
    z-index: -1; /* Hinter den Text, aber über das Hintergrundbild */
    pointer-events: none; /* Klicks gehen durch das Overlay hindurch auf die Buttons */
}

/* Wenn die Klasse aktiv ist, wird das Overlay sichtbar */
.fl-page-content.scrolled-overlay::before {
    opacity: 1;
}

.page-id-241 .fl-page-content.scrolled-overlay::before {
    background: linear-gradient(
        rgba(71, 64, 61, 0.8), 
        rgba(71, 64, 61, 0.8)
    ) !important;
}

.page-id-311 .fl-page-content.scrolled-overlay::before {
    background: linear-gradient(
        rgba(71, 64, 61, 0.8), 
        rgba(71, 64, 61, 0.8)
    ) !important;
}

/* ==========================================================================
   2. DER RAHMEN (OUTER FRAME)
   ========================================================================== */
.jante-frame-row {
    position: relative !important;
    min-height: 100vh !important; 
    overflow: hidden;
}


/* ==========================================================================
   3. SPALTEN & HOVER-EFFEKTE (SPLIT SCREEN)
   ========================================================================== */
.jante-col {
    position: relative !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Hintergrund-Ebene für den Zoom */
.jante-col::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1) !important;
    z-index: 1 !important;
}

.jante-left::before {
    background-image: 
        linear-gradient(rgba(213, 219, 217, 0.4), rgba(213, 219, 217, 0.4)), 
        url(https://neu.jante-restaurant.de/wp-content/uploads/2026/04/background_09_b005c5e660-scaled.jpg) !important;
}

.jante-right::before {
    background-image: url('https://neu.jante-restaurant.de/wp-content/uploads/2026/04/bg_studio-scaled.avif') !important;
}

/* Dezentere Zoom-Stärke (1.05) */
.jante-col:hover::before {
    transform: scale(1.05) !important;
}

/* Logos & Text über dem Bild */
.jante-col .fl-col-content {
    position: relative !important;
    z-index: 5 !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* Unsichtbare Klick-Fläche (HTML-Modul Link) */
.jante-col a[href*="/restaurant/"], 
.jante-col a[href*="/studio/"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   4. NAVIGATION & HEADER
   ========================================================================== */
.nav-wrapper {
    position: relative;
    z-index: 101; /* Über dem Rahmen */
}

.top-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.lang-switch {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    gap: 50px;
}

.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 50px;
}

.nav-item {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--text-color);
    font-weight: 400;
    transition: opacity 0.3s;
}

body.page-id-241 .nav-item {
   color:#ede7ce;
}

body.page-id-241 .booking-btn {
	   color:#ede7ce;

	    background-color: #5f5a55;
	border: 1px solid #a8a496 !important;
	}

body.page-id-241 .lang-switch {color:#ede7ce;}

/* Booking Button */
.booking-btn {
    display: inline-block; 
    padding: 20px 25px;
    border: 1px solid var(--gold-color);
    background-color: rgba(213, 219, 217, .5);
    color: var(--text-color);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.booking-btn:hover {
    background-color: rgba(213, 219, 217, .5);
    color: var(--gold-color);
}

/* ==========================================================================
   5. RESPONSIVE ANPASSUNGEN (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Die Navigation schrumpfen */
    .main-nav, .nav-links { 
        gap: 15px; 
    }
    
    .nav-item, .booking-btn { 
        font-size: 13px; 
        letter-spacing: 1px;
    }

    /* 2. Den Rahmen dünner machen, damit mehr vom Bild bleibt */
    :root {
        --frame-thickness: 20px; 
    }

    /* 3. DIE SPALTEN-HÖHE HALBIEREN */
    .jante-col {
        /* Jede Spalte bekommt genau 50% der Bildschirmhöhe */
        height: 50vh !important; 
        min-height: 50vh !important;
    }

    /* Optional: Falls die Logos auf dem Handy zu groß sind, hier skalieren */
    .jante-col img {
        max-width: 150px; /* Oder ein Wert, der für dich passt */
        height: auto;
    }

    /* Den Text-Abstand in den Spalten für Mobile verringern */
    .jante-col .fl-col-content {
        padding: 20px !important;
    }
}





/* Grundzustand für alle Bilder in der Collage */
.collage-bild {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-in-out; /* Macht den Übergang geschmeidig */
}

/* Effekt beim Hovern */
.collage-bild:hover {
    z-index: 99; /* Schiebt das Bild ganz nach oben */
    transform: scale(1.05); /* Optional: Vergrößert das Bild minimal */
}

/* 1. Container & Listen-Reset */
.menu__list, 
.menu__list .course__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left; /* Linksbündig wie im Original */
    color: #d5dbd9;
}

body.page-id-241 .menu__list .course__list {
    color: #ede7ce;
}

/* 2. Einstimmung & Gebäck (Überschriften) */
/* Gezieltes Ansprechen der Hauptzutat im ersten und letzten Listenpunkt */
.course__item:first-child .course__main-ingredient,
.course__item:last-child .course__main-ingredient {
    font-family: "playfair-display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 1.1;
    display: block; /* Stellt sicher, dass das Span sich wie ein Block-Element verhält */
}

body.page-id-241 .course__item:first-child .course__main-ingredient,
body.page-id-241 .course__item:last-child .course__main-ingredient,
body.page-id-311 .course__item:first-child .course__main-ingredient,
body.page-id-311 .course__item:last-child .course__main-ingredient{
    font-family: "Playfair Display", serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-right: 15px;
    display: inline-block;
}

/* Margin auf dem Listen-Container (li) für den Abstand nach unten */
.course__item:first-child,
.course__item:last-child {
    margin: 0 0 30px 0;
}

.fl-button-text {font-family: "playfair-display", serif;
font-weight: 400;}
.fl-button-text:hover {text-decoration:underline;}

/* 3. Die einzelnen Gänge (Flexbox für Nebeneinander) */
.menu__list .course__item {
    margin-bottom: 22px;
    display: flex;
    flex-direction: row; /* Zwingt sie in eine Zeile */
    align-items: baseline; /* Richtet die Schriften an der unteren Linie aus */
    flex-wrap: wrap; /* Falls der Bildschirm zu schmal wird, bricht es um */
}

/* 4. Hauptzutat (Groß und fett) */
.menu__list .course__main-ingredient {
    font-family: "Playfair Display", serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-right: 15px; /* Abstand zur Beilage */
    display: inline-block;
}



@media (max-width: 768px) {
	
	.menu__list .course__main-ingredient {
    font-size: 20px;
}
	.menu__list .course__side-ingredient {
    font-size: 18px !important;
}
	.course__item:first-child .course__main-ingredient,
.course__item:last-child .course__main-ingredient {

    font-size: 20px !important;
}
	.menu__list .course__item {
    margin-bottom: 12px;
}}

/* 5. Beilagen (Klein daneben) */
.menu__list .course__side-ingredient {
    font-size: 24px;
    font-weight: 300;
    opacity: 0.9;
    display: inline-block;
}

/* 6. Das Sternchen */
.menu__list .course__side-ingredient span {
    vertical-align: super;
    font-size: 0.6em;
    margin-left: 2px;
}

.subtitle:after {
    content: "";
    display: block;
    height: .2rem;
    width: 11.2rem;
    background-color: #897140;
	margin-top:10px
}

.price-row {
    display: flex;       /* Sorgt dafür, dass alles in einer Zeile bleibt */
    align-items: center;
}

.price-value {
    display: inline-block;
    width: 80px;        /* Hier die Breite anpassen, damit dein längster Preis reinpasst */
    text-align: right;  /* Preise sehen meist besser aus, wenn sie rechtsbündig am Strich stehen */
    padding-right: 10px; /* Abstand zum Strich */
}

.price-separator {
    color: #ede7ce;        /* Optional: Farbe des Trennstrichs anpassen */
    margin-right: 10px; /* Abstand zur Zutat */
}

.ingredient-value {
    flex: 1;            /* Nimmt den restlichen Platz ein */
}