body, h1,h4 {
    font-family: 'Roboto', sans-serif;
    /* weitere Stile ... */
    margin: 0;
    padding: 0;
    color: white;
}

p {color: black;
}

h2,h3 {
    font-family: 'Roboto', sans-serif;
    color: #666; /* Schriftfarbe für Überschriften innerhalb der Boxen auf schwarz setzen */
    margin: 0; /* Entfernt den Standard-Abstand */
    display: inline; /* Erlaubt Ausrichtung auf gleicher Linie mit dem Icon */
}

header, .intro, footer {
    font-family: 'Roboto', sans-serif;
    background-color: #000000;
    text-align: center;
    padding: 20px 0;
}

.intro {
    text-align: center;/* Zentriert den Inhalt horizontal */
    padding-bottom: 30px; 
}

.logo-container {
    display: inline-block; /* Erlaubt es, dass das Logo horizontal zentriert wird */
}

.logo {
    max-width: 30%; /* Begrenzt die Breite des Logos */
    height: auto; /* Behält das Seitenverhältnis des Logos bei */
}

.geoeffnet {
        color: green;
    }

.geschlossen {
        color: gray;
    }
    
.pfeil {
        cursor: pointer;
        display: inline;
    }
    
#alleOeffnungszeiten {
  		display: none;
  		list-style-type:none;
        margin-top: 10px;
        text-align: center;
	    color: black;
    }

.oeffnungszeiten-eintrag {
    float:left;
    }
    
.aktuellerTag {
        font-weight: bold;
    }
    
.status {
        display: block; /* Sicherstellen, dass der Status in einer neuen Zeile angezeigt wird. */
    }

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #0086cf;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.burger-icon {
  display: block;
  width: 30px;
  height: 4px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.burger-icon::before,
.burger-icon::after {
  content: "";
  width: 30px;
  height: 4px;
  background-color: #fff;
  position: absolute;
  left: 0;
}

.burger-icon::before {
  top: -10px;
}

.burger-icon::after {
  bottom: -10px;
}

.menu {
  position: fixed;
  bottom: 80px;
  right: 30px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: #ff0d00
}

.menu li {
  margin-bottom: 10px;
  font-size: 18px;
  /* font-weight: bold; */
  color: #ff0d00;
}

.menu a {
  text-decoration: none;
  color: #ff0d00;
}

.menu a:hover {
  text-decoration: underline;
}

.hidden {
  display: none;
}

.firmenname {
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    padding: 15px;
    text-align: left;
}

.titelbild {
    width: 100%;
    height: 400px; /* Beispielhöhe */
    background: url('/img/IMG_4607-low.JPG') no-repeat center center;
    background-size: cover;
}

/* Media Query für kleine Bildschirme */
@media screen and (max-width: 768px) {
    .titelbild {
        height: 300px; /* Anpassung der Höhe für kleine Bildschirme */
    }
}

/* Media Query für mittlere Bildschirme */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .titelbild {
        height: 450px; /* Anpassung der Höhe für mittlere Bildschirme */
    }
}

/* Media Query für große Bildschirme */
@media screen and (min-width: 1025px) {
    .titelbild {
        height: 600px; /* Anpassung der Höhe für große Bildschirme */
    }
}


.info-boxes {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Boxen vertikal */
}

.box {
    border: 1px solid #ccc;
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px;
    margin: 10px;
    background-color: white;
    color: #666; /* Textfarbe */
    max-width: 300px;  /* Die maximale Breite der Box */
    min-width: 220px;  /* Die minimale Breite der Box */
    width: 80%;
    max-width: 200px;
    text-align: center;
    text-decoration: none;
    display: flex; /* Stellt flex-container ein */
    flex-direction: column; /* Stapelt die Inhalte vertikal */
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1); /* Optional ein Schatten für mehr Tiefe */
}


.box-header {
    display: flex; /* Aktiviert Flexbox */
    align-items: center; /* Zentriert die Items auf der Querachse */
    margin-bottom: 10px; /* Zusätzlichen Abstand zum Inhalt der Box */
}

.linkohne a,p {
    color: inherit; /* Erbt die Farbe vom Elternelement, also schwarz */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
}

.icon {
    font-size: 24px; /* Einstellung der Größe der Icons */
    margin-right: 20px;
    color: #666;
}

/* Stil für Icons in der sozialen Medien Box */
.social-box .icon i {
    font-size: 28px;
    color: #666; /* Stelle sicher, dass Icons schwarz sind */
    margin-right: 5px; /* Abstand zwischen Icon Links */} 


/* Stil für Links in der Social-Box */
.social-box a {
    color: inherit; /* Erbt die Farbe vom Elternelement, also schwarz */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    display: inline-flex; /* Ermöglicht das Zentrieren des Icons im Link */
    align-items: center; /* Zentriert das Icon vertikal */
    margin-right: 5px;
}

/* Anpassungen für die Bildansicht ungeachtet der Bildschirmgröße */
@media (min-width: 768px) {
    .info-boxes {
        flex-direction: column; /* Stellt sicher, dass die Boxen auch auf breiteren Bildschirmen untereinander bleiben */
    }
}