body {
	background-color: transparent; /* Transparenten Hintergrund setzen */
  overflow: auto;
  font-family: Arial, sans-serif; /* Setzt die Schriftart für den gesamten Body */
}

.container-title {
  margin: 0 auto;
  padding-bottom: 20px; /* Abstand zum unteren Rand */
}

.container-scroll {
    max-height: 150vh; /* Adjust this value as needed */
    overflow: auto;
    padding: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* iframe Definitionen */
/*===============================================================*/
iframe {
      border: none;
      background-color: transparent; /* Transparenten Hintergrund setzen */
}
	
.iframe-container {
      width: 100%;
      height: 100vh; /* Optional: Nutzt die gesamte Höhe des Viewports */
    }

.container, .container-fluid, .row, .col, .p-0, .m-0 {
  padding: 0 !important;
  margin: 0 !important;
}

.restaurant-image {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

.menue-pos {
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 400px;
}

/* Tafel Definitionen */
/*===============================================================*/
.tafel {
  position: relative;
}

.tafel-image img {
  display: block;
}

.tafel-inhalt-1 {
  position: absolute;
  top: 10%;
  left: 1%;
}

.tafel-inhalt-2 {
  position: absolute;
  top: 38%;
  left: 1%;
}

.tafel-inhalt-3 {
  position: absolute;
  top: 67%;
  left: 1%;
}

.tafel-inhalt-suppe {
  position: absolute;
  top: 15%;

}

.menue-suppe {
  position: absolute;
  top: -50px;
  width: 280px;
}

.menue {
  position: absolute;
  padding-left: 20px;
  width: 200px;
}

.zeile-1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 250px;
}

.zeile-2 {
  position: absolute;
  top: 52px;
  left: 30px;
  width: 250px;
}

.zeile-3 {
  position: absolute;
  top: 74px;
  left: 30px;
  width: 250px;
}

.zeile-herkunft {
  position: absolute;
  top: 30px;
  left: 260px;
  width: 70px;
}

.zeile-preis {
  position: absolute;
  font-size: 22px!important;
  top: 70px;
  left: 260px;
  width: 70px;
}


/* Sterne und Herz Definitionen */
/*===============================================================*/
.position-sterngruppe {
  position: relative;
  left: 220px;
}

.star, .heart-container {
  font-size: 1.5em;
  cursor: pointer;
  display: inline-block;
}

.star {
  color: lightgray;
}

.star.selected {
  color: gold;
}


/* Herz besteht aus 3 Quadraten um 45 Grad gedrecht */
/* dies ist das untere Quadrat für die Spitze des Herzens */
.heart {
  position: relative;
  width: 0.38em;
  height: 0.38em;
  margin-bottom: 3px;
  background-color: lightgray;
  position: relative;
  transform: rotate(-45deg);
  transition: background-color 0.3s;
  margin-left: 10px;
}

/* dies sind die beiden oberen Quadrate */
/* sie werden mit dem Borderradius zu Kreisen */
.heart::before,
.heart::after {
  content: '';
  width: 0.38em;
  height: 0.38em;
  background-color: lightgray;
  border-radius: 50%;
  position: absolute;
  transition: background-color 0.3s;
}

.heart::before {
  top: -0.18em;
  left: 0;
}

.heart::after {
  right: -0.18em;
  top: 0;
}

.heart.selected,
.heart.selected::before,
.heart.selected::after {
  background-color: red;
}
 
/* Tooltip einfärben
/*===============================================================*/
/* Überschreibt die Tooltip-Klasse, um den Text einzufärben */
 .tooltip-inner {
  background-color: #333 !important; /* Hintergrundfarbe des Tooltips */
  color: #ffcc00 !important; /* Farbe des Textes */
  font-weight: bold; /* Fettdruck für den Text */
  max-width: 250px;
  white-space: normal;
  word-wrap: break-word;
}
.tooltip-arrow {
  border-top-color: #333 !important; /* Farbe des Pfeils an den Tooltip-Hintergrund anpassen */
}
.tooltip-text {
  color: blue !important;
  text-decoration: underline;
  cursor: pointer;
}

/* Tagesmenü Eingaben, Auswahl über DB
/*===============================================================*/
/* Container für das Eingabefeld und die Vorschlagsliste */
.menue-input-container {
  position: relative; /* Ermöglicht absolute Positionierung der Dropdown-Liste */
  width: 200px; /* Breite des Containers */
  margin: 50px auto; /* Zentriert den Container horizontal und gibt vertikalen Abstand */
}

/* Stile für das Eingabefeld */
.menue-beilagen {
  width: 100%; /* Vollständige Breite des Containers */
  padding: 10px; /* Innenabstand */
  font-size: 16px; /* Schriftgröße */
  border: 1px solid #ccc; /* Rahmen um das Eingabefeld */
  border-radius: 4px; /* Abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten für 3D-Effekt */
}

.postion-relative {
  position: relative;
}

/* Stile für die Dropdown-Liste */
/* Stil für das Pulldown-Menü (.menue-list) */
.menue-list {
  position: absolute; /* Positioniert die Liste relativ zum Container */
  top: 100%;
  left: 0;
  width: 100%; /* Passt die Breite an das Eingabefeld an */
  background-color: white; /* Setzt weißen Hintergrund für das Menü */
  border: 1px solid #ccc; /* Umrandung des Menüs für klare Abgrenzung */
  border-top: none; /* Entfernt den oberen Rand für nahtlose Verbindung */
  max-height: 200px; /* Begrenzt die Höhe des Menüs, um Scrollbars zu ermöglichen */
  overflow-y: auto; /* Fügt vertikale Scrollbars hinzu, wenn die Höhe überschritten wird */
  list-style-type: none; /* Entfernt Aufzählungszeichen für Listeneinträge */
  padding: 0; /* Entfernt Innenabstand der Liste */
  margin: 0; /* Entfernt Außenabstand der Liste */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Fügt Schatten hinzu für 3D-Effekt */
  z-index: 1000; /* Priorisiert die Liste über anderen Elementen */
}

/* Stile für die einzelnen Listeneinträge (.menue-list li) */
.menue-list li {
  display: flex; /* Aktiviert Flexbox für einfache Ausrichtung */
  justify-content: space-between; /* Verteilt den Platz zwischen den Elementen */
  padding: 10px; /* Fügt Abstand innerhalb der Listeneinträge hinzu */
  cursor: pointer; /* Zeigt an, dass Listeneinträge anklickbar sind */
}

/* Hover- und Hervorhebungsstil für Listeneinträge */
.menue-list li:hover,
.menue-list .highlighted {
  background-color: #f0f0f0; /* Ändert Hintergrundfarbe bei Hover oder Hervorhebung */
}

/* Stil für den Löschen-Button */
.delete-button {
  color: red; /* Textfarbe für den Löschen-Button */
  font-weight: bold; /* Fettdruck für den Löschen-Button */
  cursor: pointer; /* Zeigt an, dass der Button anklickbar ist */
  margin-left: 10px; /* Abstand zum Text */
  font-size: 18px; /* Schriftgröße */
}

/* Klasse für versteckte Elemente */
.hidden {
  display: none; /* Versteckt Elemente */
}