/*body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    margin: 0;
}*/
html {
    height: 100%;
    background: #d4a373;
    /* testen */
    /*max-width: 100vw;*/
}

html, body { /* Wichtig: Auch <html> muss angepasst werden */
    margin: 0;
    padding: 0;
    /*    width: 100%;*/
    height: 100%;  /*Stelle sicher, dass html und body die volle Höhe einnehmen*/
    box-sizing: border-box; /* Für beide Elemente */
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%; /* Breite auf 100% setzen */
    font-family: 'Arial', sans-serif;
    /*margin-left: 0px;*/
    margin: 0px;
    padding: 0px;
    /*   background: linear-gradient(to bottom, #f8e8c1, #d4a373) !important; /* Sanfte Übergänge von warmem Gelb zu Kaffeebraun */
    /*background: linear-gradient(to bottom, #d4a373, #f8e8c1) !important; /* Sanfte Übergänge von warmem Gelb zu Kaffeebraun */
    color: #333; /* Textfarbe für guten Kontrast */
    background: linear-gradient(to bottom, #f8e8c1, #d4a373);
    /*background: #d4a373;*/
    /*background-color: transparent;*/
    /*background-size: cover;*/
}


/* Optional: dezentes Muster hinzufügen */
body::before {
    content: "";
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
/*    background-image: url('../wallpapers/Leckeres_Kaffee_Kuchen_1.Leckeres_Kaffee_Kuchen_1jpg');  /*Ein dezentes Muster-Bild hinzufügen*/
    opacity: 0.6;    /*Sehr schwaches Muster, um nicht zu dominant zu sein*/
    pointer-events: none;     /*Interaktionen mit dem Hintergrund verhindern*/
    z-index: -1;
}


.main, aside, content, #sidebar {
    /*background-color: rgba(255, 255, 255, 0.8); /* Halbtransparente Hintergründe für die Inhalte */
    border-radius: 8px; /* Weiche Ecken für ein angenehmes Erscheinungsbild */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für eine Tiefenwirkung */
}


#wrapper, #site-wrapper {
    flex: 1 0 auto;
    /* WICHTIG: Erlaubt dem Inhalt zu wachsen */
    display: flex;
    /* Für die innere Aufteilung */
    flex-direction: column;
    /* Inhalt vertikal anordnen */
    /*min-height: calc(100vh - 65px);*/
    /* WICHTIG: Höhe des Footers abziehen */
    width: 100%;

}


/*.footer {*/
.footer {
    /* background-color: #333; 
     display: flex;
     flex-direction: column; */
    /*
     display: grid;
     color: #fff; */
    border: none;
    display: flex; /* Verwende Flexbox, um die DIVs nebeneinander zu platzieren */
    /*   justify-content: space-between; /* Abstand zwischen den DIVs */
    align-items: center; /* Zentriert die Inhalte vertikal */
    text-align: center;
    padding: 5px;
    max-height: 90px;
    font-size: 12px;
    width: 100%; /* Die Breite des Footers */
    margin-top: auto; /* Drückt den Footer an das Ende */
    /*margin-bottom: 0px;*/
    background-color: #8b5e34; /* Dunkelbraune Farbe für den Footer */
    color: #f8e8c1; /* Passende helle Schriftfarbe */
    /* Neuer Content 2 test*/
    /*bottom: 0;*/
    z-index: 2;
    /*position: fixed;  zeig immer an */
}

.footer-logo, .footer-info {
    gap: 10px;
}

.footer-logo {
    /* text-align: right; /* Links ausrichten */
    width: 100px;
    margin-left: 165px;
}

.footer-info {
    text-align: center;
    min-width: 160px;
    margin-left: 3px;
    margin-top: -5px;
    width: auto;
}

#sidebar {
    width: 165px;
    top: 0;
    left: 0;
    margin-left: 2px;
    margin-top: 2px;
    position: fixed;
    max-height: 600px;
    background: linear-gradient(to bottom, #d4a373, #8b5e34);    /*Von hellbraun zu dunkelbraun*/
    /*background-color: #222;*/
    /*overflow-x: hidden;*/
    overflow-y: hidden;
    overflow-x: hidden;
    /*color: #fff;*/
    cursor: pointer; /* Mauszeiger wird zur Hand */
    z-index: 1;

}


.nav-item {
    color: #fff;
    padding: 20px; /* Button Größe */
    /*padding: 12px; /* Button Größe */
    margin-top: 2px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;

}

.nav-item:hover {
    background-color: #575757;
    transform: scale(1.05);
}

nav ul{
    /*margin: -10px;*/
    padding-left: 0; /* Entfernt den linken Innenabstand */
    /*margin-left: 0px;  Entfernt den linken Außenabstand */
    list-style-type: none; /* Entfernt die Aufzählungszeichen (Punkte/Nummern) */
    padding: 3px;
}

nav li {
    /*color: white;*/
    /*font-size: 17px;*/
    /*background-color: rgba(255, 255, 255, 0.8); /* Halbtransparente Hintergründe für die Inhalte */
    border-radius: 8px; /* Weiche Ecken für ein angenehmes Erscheinungsbild */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für eine Tiefenwirkung */
    /*padding-bottom: 10px;*/
    background: linear-gradient(to bottom, #8b5e34, #9d6f45);    /*Von hellbraun zu dunkelbraun*/
    margin-left: 10px;
    margin-right: 10px;
}


#content {
    flex-grow: 1;
    margin-left: calc(165px + 10px); /* Abstand zur Sidebar */
    padding: 5px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: calc(600px - 19px); /* hält footer auf Abstand */
}

/*.theme-switcher button {
    margin: 5px;
}*/


#gallery-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.gallery-container {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.thumbnail {
    cursor: pointer;
    transition: transform 0.3s;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.thumbnail:hover {
    transform: scale(1.05);
}

#thumbnail-size {
    flex-grow: 1;
    max-width: 60%; /* Adjust based on how much space you want */
    margin: 0 5px;
}

/* Style the overlay to cover the entire screen */
.image-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    overflow: hidden;
}

.image-frame {
    display: flex;
    max-width: 90%;
    max-height: 90%;
    padding: 20px;
    background: white;
    border-radius: 8px;
    position: relative;
}

/* Responsive styling for the full-size image */
.full-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    /* Ensure the image scales proportionally */
    /*  cursor: pointer; */
}

.image-title {
    position: absolute;
    top: 10px;
    font-size: 18px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4d4d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 1;
}

/* Position previous and next buttons on the sides */
.prev-button, .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    z-index: 1001;
}

button#zoom-out,
button#zoom-in {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 16px;
}

/* Ensure the gallery container adapts to smaller screens */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 5px;
}

/* Adjust button positioning to stay within screen bounds */
.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}


/* Impressum */


.contact-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.contact-table th, .contact-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.contact-table th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

.contact-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.contact-table tr:hover {
    background-color: #f1f1f1;
}


#qr-contact {
    max-width: 250px;
    height: auto;
    width: 75%;
}
/* /Impressum */


/** Öffnungszeiten **/

div#opening-times.head-elem  {
    max-width: 150px;
}

div#welcome.head-elem, div#googlemaps.head-elem {
    min-width: 70px;
    min-height: 120px;
}

#is-open {
    width: 94%;
    margin-top: 2px;
    font-family: monospace;
    padding: 3px;
    font-size: 1em;
    color: white;
    text-align: center;
    border-radius: 5px;
}

#opening-times {
    font-family: Arial, sans-serif;
    font-size: 12px;
    max-width: 200px;
    min-width: 155px;
    margin: 0 auto;
    /*padding: 10px;*/
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-section h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

#opening-times-table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 2px;
}

/*#opening-times-table th, #opening-times-table td {*/
#opening-times-table table {
    padding: 2px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

#opening-times-table th {
    background-color: #4CAF50;
    /*color: white;*/
    font-weight: bold;
}

#opening-times td {
    margin-left: 3px;
    padding-left: 10px;
}

#opening-times-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#opening-times-table tr:nth-child(odd) {
    color: white;
}

#opening-times-table tr:last-child {
    margin-bottom: 20px;
}

#opening-times-table tr:hover {
    background-color: #f8e8c1;
    font-size: 1.1em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure buttons and image fit well on small screens 
RESPONSIVE DESIGN
*/

@media (min-width: 1200px) {
    body {
        /* transform: scale(1.2); REMOVE */
        /* width: 83.5%; REMOVE */
        font-size: 1.2rem; /* Textgröße vergrößern */
    }
    #sidebar {
        width: 200px; /* Sidebar Breite anpassen */
        font-size: 1.2rem; /* Textgröße in der Sidebar anpassen */
        max-height: 650px;
    }

    #content {
        margin-left: 210px; /* Angepasster Abstand zur Sidebar */
        min-height: 633px;
    }

    #is-open {
        width: 93%;
        /*width: 110px;*/
        margin-top: 2px;
        margin-left: 3px;
        font-family: monospace;
        padding: 3px;
        font-size: 1em;
        color: white;
        text-align: center;
        border-radius: 5px;
    }
    
        #opening-times {
        font-family: Arial, sans-serif;
        font-size: 0.6em;
        max-width: 200px;
        min-width: 120px;
        margin: 0 auto;
        /*padding: 10px;*/
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    #opening-times-table {
        width: 98%;
        border-collapse: collapse;
        margin-top: 2px;
    }

    footer {
        margin-left: 0px;
        font-size: 14px; /* Textgröße im Footer anpassen */
    }
    .footer-logo {
        margin-left: calc(210px - 12px);
    }
    /* Weitere Anpassungen nach Bedarf */
}

@media (max-width: 505px) {
    body {
        /* transform: scale(0.8); REMOVE */
        /* width: 125%; REMOVE */
        font-size: 0.9rem; /* Textgröße verkleinern */
    }

    #sidebar {
        /*width: 120px; /* Sidebar Breite anpassen */
        font-size: 0.85rem; /* Textgröße in der Sidebar anpassen */
        /*font-size: 14px; /* Textgröße in der Sidebar anpassen */
        /*height: auto;*/
        width: 120px;
    }

    #sidebar li, #sidebar ul {
        padding: 8px;
        margin: 2px;
    }

    h1 {
        font-size: 1em;
    }


    #content {
        /*margin-left: 120px; /* Angepasster Abstand zur Sidebar */
        min-height: 535px;
        margin-left: 130px;
        font-size: 0.8em;

    }

    .footer {
        font-size: 10px; /* Textgröße im Footer anpassen */
        margin-left: 0px;
    }

    .footer-logo {
        margin-left: calc(120px - 3px);
    }

    /* opening times table */

    #is-open {
        width: 88%;
        /*width: 110px;*/
        margin-top: 2px;
        margin-left: 3px;
        font-family: monospace;
        padding: 3px;
        font-size: 1em;
        color: white;
        text-align: center;
        border-radius: 5px;
    }

    #opening-times {
        font-family: Arial, sans-serif;
        font-size: 0.6em;
        max-width: 200px;
        min-width: 120px;
        margin: 0 auto;
        /*padding: 10px;*/
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    #opening-times-table {
        width: 90%;
        border-collapse: collapse;
        margin-top: 2px;
    }

    /* Weitere Anpassungen nach Bedarf */
}


@media (max-width: 300px) {
    body {
        /* transform: scale(0.8); REMOVE */
        /* width: 125%; REMOVE */
        font-size: 0.6rem; /* Textgröße verkleinern */
    }

    #sidebar {
        /*width: 120px; /* Sidebar Breite anpassen */
        font-size: 0.6rem; /* Textgröße in der Sidebar anpassen */
        /*font-size: 14px; /* Textgröße in der Sidebar anpassen */
        /*height: auto;*/
        width: 95px;
        padding: 0px;
        margin: 0px;
    }


    #sidebar img {
        width: 55px;
    }

    h1 {
        font-size: 1em;
    }


    #content {
        min-height: 535px;
        margin-left: 105px;
        font-size: 0.6em;
        /*padding: 2px;*/

    }

    .footer {
        font-size: 6px; /* Textgröße im Footer anpassen */
        margin-left: 0px;
        margin: 0px;
    }

    .footer-logo {
        margin-left: calc(90px);
    }

    .footer-info {
        margin-left: 5px;
    }


    #is-open {
        /*width: 97%;*/
        width: 82px;
        margin-top: 2px;
        margin-left: 3px;
        font-family: monospace;
        padding: 3px;
        font-size: 1em;
        color: white;
        text-align: center;
        border-radius: 5px;
    }

    #opening-times {
        font-family: Arial, sans-serif;
        font-size: 0.55em;
        /*max-width: 65px;*/
        min-width: 60px;
        margin: 0 auto;
        /*padding: 10px;*/
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }


    #opening-times-table {
        width: 97%;
        border-collapse: collapse;
        margin-top: 2px;
    }

    /* Weitere Anpassungen nach Bedarf */
}