/*New Content*/
html {
height: 100%;
/* testen */
/*max-width: 100vw;*/
}
html, body { /* Wichtig: Auch muss angepasst werden */
margin: 0;
padding: 0;
height: 100%; /*Stelle sicher, dass html und body die volle Höhe einnehmen*/
box-sizing: border-box; /* Für beide Elemente */
/*new*/
width: 100%; /* Stellt sicher, dass die Breite immer korrekt ist */
overflow-x: hidden; /* Verhindert horizontales Scrollen */
}
/*New Content*/
body {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%; /* Breite auf 100% setzen */
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background: linear-gradient(to bottom, #333, #111); /* Dunkler Hintergrund */
background-attachment: fixed;
background-size: cover;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgb(38, 42, 43), rgb(13, 14, 14));
color: rgb(255, 255, 255);
border-color: #736b5e;
border-top-color: rgb(106, 98, 87);
border-right-color: #6a6257;
border-bottom-color: #6a6257;
border-left-color: #6a6257;
}
div#opening-times {
/*
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgb(38, 42, 43), rgb(13, 14, 14));
color: rgb(216, 212, 207);
border-color: #736b5e;
border-top-color: rgb(106, 98, 87);
border-right-color: #6a6257;
border-bottom-color: #6a6257;
border-left-color: #6a6257;
*/
}
/* 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;
}
.wrapper, main, aside, footer, content, #sidebar, #about_us {
border-radius: 8px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* Dunklerer Schatten */
}
/* ... (Footer-Logo und Info bleiben gleich) */
#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%;
}
#sidebar {
width: 190px;
margin-left: -33px;
margin-top: 1px;
position: fixed;
background: linear-gradient(to bottom, #555, #333); /* Dunkler Verlauf */
color: #eee;
height: 99%;
/* Höhe an den Viewport anpassen, aber mit maximaler Höhe */
max-height: calc(100vh - 5px); /* 100px für Header und Footer abziehen (ungefähr) */
overflow-y: auto; /* Scrollbalken bei Bedarf anzeigen */
/*Optional: Scrollbalken stylen (Browserabhängig)*/
scrollbar-width: thin; /* Für Firefox */
scrollbar-color: #a0a0a0 #e0e0e0; /* Für Firefox */
/* NEW */
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(#404548, #262a2b);
background-image: linear-gradient(rgb(38, 42, 43), rgb(13, 14, 14));
color: #dddad6;
scrollbar-color: rgb(172, 165, 154) rgb(78, 84, 87);
}
/* Für Webkit-basierte Browser (Chrome, Safari) */
#sidebar::-webkit-scrollbar {
width: 6px;
}
#sidebar::-webkit-scrollbar-track {
background: #e0e0e0;
}
#sidebar::-webkit-scrollbar-thumb {
background-color: #a0a0a0;
background-color: #ff0000;
border-radius: 3px;
}
.top-bar {
background-color: #333;
color: #fff;
text-align: center;
padding: 1px;
height: 2px;
}
.footer {
display: flex;
align-items: center;
text-align: center;
padding: 5px;
font-size: 11px;
width: calc(100vw - 214px); /* Dynamische Breite */
width: calc(100vw - 190px); /* Dynamische Breite */
box-sizing: border-box; /* Wichtig für die korrekte Berechnung */
margin-top: auto;
margin-bottom: 5px;
background-color: #800000; /* Dunkelrot */
height: 88px;
color: #eee;
margin-left: 178px;
margin-left: 165px;
}
.footer-logo, .footer-info {
gap: 10px;
}
.footer-logo {
width: 150px;
}
.footer-info {
text-align: center;
min-width: 160px;
margin-left: 3px;
margin-top: -5px;
width: auto;
}
.nav-item {
padding: 6px; /* Angepasst */
text-decoration: none;
display: block;
transition: background-color 0.2s, transform 0.2s;
border: 1px solid #ddd; /* Rahmen hinzugefügt */
border-radius: 5px; /* Abgerundete Ecken */
margin-bottom: 5px; /* Abstand zwischen den Elementen */
box-shadow: 2px 2px 5px rgba(221, 221, 221, 0.2); /* 3D-Effekt */
color: #dddad6;
text-decoration-color: currentcolor;
border-top-color: rgb(58, 62, 65);
border-right-color: #3a3e41;
border-bottom-color: #3a3e41;
border-left-color: #3a3e41;
}
.nav-item:hover {
transform: scale(1.05); /* Leichte Vergrößerung beim Hover */
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3); /* Verstärkter Schatten beim Hover */
background-color: #ff0000;
}
.nav-item.active {
background-color: #428bca;
color: yellow;
font-weight: bold;
border: 1px solid #286090; /* Dunklerer Rahmen für den aktiven Link */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Schatten für den aktiven Link */
}
#content {
flex-grow: 1;
margin-left: 165px;
padding: 5px;
overflow: auto;
display: flex;
flex-direction: column;
margin-top: 5px;
min-height: calc(600px - 19px); /* hält footer auf Abstand */
}
/* ... (Rest des CSS anpassen) */
.contact-table th {
background-color: #cc0000; /* Rot */
color: white;
font-weight: bold;
}
.theme-switcher button {
margin: 5px;
}
/* neu Allgemeines Layout */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#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 */
/**
.opening-times {
font-family: Arial, sans-serif;
max-width: 400px;
min-width: 245px;
margin: 0 auto;
padding: 10px;
background-color: #f4f4f4;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
*/
.contact-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
/*
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
td {
background-color: #1b1b1b;
}
tr:nth-child(even) {
background-color: #1b1e1f;
}
tr:nth-child(odd) {
background-color: #1e2122;
}
tr:hover {
background-color: #0000ff;
}
*/
/* Ensure buttons and image fit well on small screens */
@media (max-width: 600px) {
.prev-button, .next-button {
font-size: 18px;
padding: 8px;
}
}