body {
  font-family: 'Open Sans', Arial, sans-serif;
  background-color: #1E2523; /* Dunkelbraun/Schwarz von coffee-koch.de */
  color: #F5F5F5; /* Beige/Weiß für Text */
}

#machineSelect {
  display: block !important;
  visibility: visible !important;
}

.card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Etwas stärkerer Schatten für Tiefe */
  background-color: #2A2F2D; /* Dunkler Hintergrund für Karten */
  color: #F5F5F5;
}

.card-header {
  background-color: #8B4513; /* Brauner Ton für Header */
  color: #FFFFFF;
  font-weight: bold;
  border-bottom: 1px solid #F9A825; /* Orangefarbener Akzent */
}

.input-group-text {
  min-width: 120px;
  background-color: #8B4513; /* Brauner Hintergrund */
  color: #FFFFFF;
  border: 1px solid #F9A825;
}

.btn-primary {
  min-width: 100px;
  background-color: #F9A825; /* Orange von coffee-koch.de */
  border-color: #F9A825;
  color: #1E2523;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #D88C00; /* Dunkleres Orange für Hover */
  border-color: #D88C00;
}

.btn-success {
  min-width: 100px;
  background-color: #6B4E31; /* Dunkler Braunton */
  border-color: #6B4E31;
  color: #FFFFFF;
  transition: background-color 0.3s ease;
}

.btn-success:hover {
  background-color: #8B4513; /* Hellerer Braunton für Hover */
  border-color: #8B4513;
}

.btn-secondary {
  min-width: 100px;
  background-color: #4A4A4A; /* Neutraler Grauton */
  border-color: #4A4A4A;
  color: #F5F5F5;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #6B6B6B; /* Helleres Grau für Hover */
  border-color: #6B6B6B;
}

.table {
  background-color: #2A2F2D; /* Dunkler Hintergrund für Tabellen */
  color: #F5F5F5;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #F9A825; /* Orangefarbene Ränder */
}

.table thead th {
  background-color: #8B4513; /* Brauner Header */
  color: #FFFFFF;
}

.accordion-button {
  background-color: #2A2F2D;
  color: #F5F5F5;
}

.accordion-button:not(.collapsed) {
  background-color: #8B4513; /* Brauner Ton bei geöffnetem Akkordeon */
  color: #FFFFFF;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(249, 168, 37, 0.5); /* Orangefarbener Fokus-Rahmen */
}

.nav-link {
  color: #F5F5F5;
}

.nav-link:hover,
.nav-link.active {
  color: #F9A825; /* Orangefarbener Akzent für aktive/hover Links */
}

/* Grid-Layout für Diagramme */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr; /* Genau 1 Diagramm pro Zeile */
  gap: 10px; /* Abstand zwischen Diagrammen */
  padding: 10px;
}

.chart-grid canvas {
  max-width: 550px; /* Feste Breite für klare Darstellung */
  width: 100%; /* Responsive innerhalb des Grids */
  background-color: #2A2F2D; /* Dunkler Hintergrund für Diagramme */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
}