:root{...}
/* Allgemein */

.red{
color: red;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* höhere z-index-Werte werden über niedrigeren Werten angezeigt */
}




/* Hintergrundfarbe, Textfarbe und Schatten */
.bg-danger {
    background-color: #dc3545 !important; /* Rote Hintergrundfarbe */
}

.text-danger {
    color: #fff !important; /* Weißer Text */
}

.shadow {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
}

/* Überschrift */
.display-4 {
    font-size: 2.5rem; /* Größere Schriftgröße */
    font-weight: bold; /* Fetter Text */
}



.nav-link {
cursor: pointer;
}

.nav-link:active,
.nav-link:hover {
color: red !important;
}




/* helal label */
.helal-label {
  background-color: red;
  color: white;
}

.vegan-label {
  background-color: green;
  color: white;
}





/*Hintergrundbild*/
.bg-picture {
margin-top: 60px;
  position: relative;
  height: 40vh;
  background-image: url('https://www.maggi.de/sites/g/files/cisvdi421/files/styles/maggi_desktop_image_style/public/maggi_kochratgeber_gourmetfleisch.jpg?h=4f5b30f1&itok=MAd1qMzv');
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}










/*home.html: Prozess Beschreibung */
        .bg-picture {
            display: none !important;
        }





.flash-messages-container {
    margin-top: 60px; /* Oder wie hoch Ihre Navbar ist + zusätzlicher Abstand */
}



.card {
  border-radius: 15px; /* Weiche Rundung der Kanten */
  overflow: hidden; /* Stellt sicher, dass der Inhalt die Grenzen der Kartenrundung respektiert */
}

.card-header {
  font-weight: bold; /* Betont den Kartentitel */
}

.card-title {
  color: #333; /* Dunklere Schriftfarbe für bessere Lesbarkeit */
}

.btn-outline-danger {
  border-color: #dc3545; /* Passende Rahmenfarbe */
}

.btn-outline-danger:hover {
  background-color: #dc3545; /* Hintergrundfarbe beim Hover */
  color: white; /* Textfarbe beim Hover */
}

.form-control, .btn-outline-danger {
  border-radius: 20px; /* Abgerundete Ecken für Eingabefelder und Buttons */
}






/* Bewertungssterne */
.rating-stars .fa-star {
    color: gold; /* setzt die Farbe auf gold */
}







/* Sidebar in den Adminseiten ebenfalls für den Metzger */
.sidebar {
  position: relative  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #343a40;
  padding-top: 0rem;
  padding-bottom: 3rem;
}

/* moderne Scrollbalken-Stile */
.sidebar::-webkit-scrollbar {
  width: 10px;
  background-color: #1a1a1a;
}

.sidebar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #4d4d4d;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  transition: all 0.3s ease-in-out;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}






/* Minedestbestellmenge wurde nicht erreicht Toast */
#toast {
  position: fixed;
  bottom: 500px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #ff3030;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}






/* Globale Stile */
body {
  font-family: "Helvetica Neue", sans-serif;
}

/* Header */
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header a {
  color: #fff;
  text-decoration: none;
}

header a:hover {
  text-decoration: underline;
}

/* Titel */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.btn {
  border-radius: 0;
}

/* Suche */
#search-input {
  border-radius: 0;
}







/* Button Design */
.btn-danger:hover {
  background-color: #c9302c;
  border-color: #c9302c;
}

.btn-danger {
  border-radius: 20px; /* ändern Sie die Pixelzahl, um die Rundung anzupassen */
}

#increase_quantity_btn {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}








/* Grundlegendes Layout und Styling der Sidebar */
.sidebar-1 {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px; /* Breite der Sidebar */
  height: 100vh;
  background-color: #fff; /* Helle Grundfarbe */
  padding: 20px;
  box-shadow: -4px 0 8px rgba(0,0,0,0.1); /* Schatten für einen schwebenden Effekt */
  overflow-y: auto; /* Ermöglicht das Scrollen */
}

/* Kopfbereich der Karte */
#sidebar-card .card-header {
  background-color: #dc3545; /* Rot für den Header, angelehnt an .bg-danger */
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 15px;
  border-radius: 8px 8px 0 0;
}

/* Stil der Artikel-Listenelemente */
#sidebar-card .list-group-item {
  background-color: #f8f9fa; /* Leichter Hintergrund */
  color: #333;
  padding: 15px;
  margin-bottom: 10px; /* Abstand zwischen den Elementen */
  border: none;
  border-radius: 8px; /* Abgerundete Ecken */
  display: flex;
  flex-direction: column; /* Elemente vertikal untereinander anordnen */
  align-items: flex-start; /* Ausrichtung am Anfang */
}

.item-content {
  width: 100%; /* Nutzt die volle Breite aus */
}

.item-description {
  font-weight: bold;
  margin-bottom: 5px; /* Abstand zwischen Beschreibung und den Einheiten */
}

.item-details {
  display: flex;
  justify-content: space-between; /* Verteilt die Elemente gleichmäßig */
  width: 100%; /* Nutzt die volle Breite aus */
}

.item-details > span, .item-price {
  white-space: nowrap;
  margin-right: 8px;/* Verhindert Umbrüche innerhalb der Span-Elemente */
}

/* Macht den Preis rechtsbündig */
.item-price {
  color: #dc3545; /* Rot für den Preis, konsistent mit dem Header */
  font-weight: bold;
  margin-left: auto; /* Schiebt den Preis nach rechts */
}

/* Stil für die Anzeige der Gesamtsumme */
.total-price {
  background-color: #f8f9fa; /* Hintergrundfarbe */
  color: #333; /* Textfarbe */
  font-weight: bold; /* Fettschrift */
  border-top: 2px solid #dc3545; /* Roter oberer Rand */
  padding: 15px; /* Innenabstand */
  margin-top: 20px; /* Abstand zum vorherigen Element */
  text-align: right; /* Rechtsbündige Ausrichtung */
}

/* Stil für den Text "Summe" */
.total-price span {
  margin-right: 10px; /* Abstand zwischen "Summe" und Betrag */
}






.outer-card {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 20px;
}

.outer-card-header {
background-color: #fff;
border-bottom: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
}


.shimmer-bg {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}



@media screen and (max-width: 1000px) {
.sidebar-1 {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 15px;  /* Sie können diesen Wert ändern, um den gewünschten Rundungsgrad zu erhalten */
}

  /* Diese Regel überschreibt die Spaltenbreite für kleinere Bildschirme */
  .col-lg-5 {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 15px;
  }
}

/* Mindestbestellwert und Öffnungszeit */
.info-container {
    display: flex;
    align-items: center;  /* Vertikale Zentrierung, falls nötig */
}

.money-info {
    margin-right: 10px;  /* Abstand hinzufügen */
}






@media screen and (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    display: block;
  }

  .table-responsive .table {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 768px) {
    .card .card-title {
        margin-bottom: 10px; /* Anstatt des ursprünglichen Abstandes */
    }
    /* Sie können auch andere Elemente anpassen */
}


/* Anpassungen für mobile Geräte */
@media screen and (max-width: 768px) {
    .card-text.text-danger {
        margin-bottom: 15px; /* oder einen anderen Wert, der für Sie funktioniert */
    }
}


@media screen and (max-width: 1000px) {

  .card {
    margin-bottom: 15px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .card-body {
    padding: 15px;
  }

}

@media screen and (max-width: 768px) {
    .btn-group .btn.btn-danger.btn-sm {
        margin: 0;           /* Kein äußerer Abstand */
        padding: 0.25rem;    /* Geringer innerer Abstand */
    }
    .btn-group .btn.btn-danger.btn-sm.ml-4 {
        margin-left: 0.25rem;  /* Passen Sie den linken Abstand des ersten Buttons leicht an */
    }
}



/* Mobile Anpassungen für navbar */
@media screen and (max-width: 768px) {
.home .navbar {
        position: flex;
        z-index: 5000; /* Dies stellt sicher, dass andere z-index-Werte, die niedriger sind, nicht darüber angezeigt werden */
    }
    .carousel {
        margin-top: 60px;
    }
}

/* Dieser Stil wird nur auf Bildschirmen mit einer Maximalbreite von 768px angewendet, was typischerweise Tablets und Smartphones abdeckt. */
@media (max-width: 768px) {
    .container.col-lg-6 {
        width: 100%;             /* Der Container nimmt die volle Breite des Bildschirms ein */
        max-width: 100%;         /* Maximalbreite entfernen/überschreiben, falls sie festgelegt ist */
    }

    .step-card {
        width: 100%;
        padding: 5px;
    }

    .card.mb-3 {
        width: 100%;             /* Die Karte nimmt die volle Breite des Bildschirms ein */
        min-height: 15px;       /* Setzt eine Mindesthöhe */
    }
}






.order-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* Abstand zwischen den Elementen */
}



/* Stil für die Info-Elemente am unteren Rand der Karte */
.card-custom .info-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    padding: 3px 8px;
    background-color: #f1f1f1;
    border-radius: 15px;
    color: #333;
}

.card-custom .info-item i {
    color: #555;
}

.card-custom .info-item strong {
    color: #333;
}

/* Bar Zahlungs Button */
.paypal-button-style {
    background-color: #e63946;  /* Dunkles, modernes Rot */
    color: #FFF;  /* Weißer Text für bessere Lesbarkeit auf dunklem Rot */
    border-radius: 6px;
    border: 1px solid #d32f2f;  /* Ein dunklerer roter Rand */
    padding: 10px 40px;
    font-size: 18px;
    font-weight: bold;  /* Fetter Text */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    text-align: center;
}

.paypal-button-style:hover {
    background-color: #d32f2f;  /* Minimal dunkleres Rot beim Überfahren */
}

/* Mobile Ansicht: Wenn die Bildschirmbreite max. 768px beträgt */
@media (max-width: 768px) {
    .paypal-button-style {
        padding: 5px 40px; /* Reduziertes Padding oben/unten für mobile Ansicht */
    }
}