body {
    background-color: #121212;
    color: #e0e0e0;
  }

  h2, h1 {
    color: #f8f9fa;
  }

  .highlight-min { 
    background-color: #2e7d32 !important; /* dunkleres Grün für Darkmode */
    color: #fff !important;
  }

  /* Checkboxen mit Flaggen */
  .flag-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-gray-800);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
  }

  .flag-checkbox:hover {
    background: var(--color-gray-700);
  }

  .flag-checkbox input {
    margin-right: 4px;
  }

  .flag-checkbox img { 
    width: 24px; 
    height: 16px; 
    vertical-align: middle; 
    border: 1px solid #555;
  }


  .stats-card .card-header {
    background-color: var(--color-gray-800);

  }

  .stats-card .card-body {
    background-color: var(--color-gray-925);
  }

  .btn-cart {
    background-color: var(--color-indigo-800);
    border-color: var(--color-indigo-800);
    color: white;
  }

  .btn-primary {
    
    background-color: var(--color-indigo-800);
    border-color: var(--color-indigo-800);
  }

  .panel-bg {
    background-color: var(--color-gray-700) !important;
  }

  .green-text {
    color: var(--color-green-400) !important;
    font-weight: bold;
  }


  .beer-progress {
      position: relative;
      height: 20px; /* schmale Progressbar */
      overflow: visible; /* wichtig, damit das Icon rausstehen darf */
    }
    .beer-progress .progress-bar {
      background-color: #f7c600; /* Bier-gelb */
    }
    .beer-icon {
      position: absolute;
      top: -25px; /* Icon sitzt über der Bar */
      font-size: 40px; /* deutlich größer */
      animation: rideBeer 3s linear infinite;
    }
    @keyframes rideBeer {
      0%   { left: -40px; }
      100% { left: 100%; }
    }


  @keyframes rise{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-38px) scale(.7);opacity:.2}}

  .progress{width:260px;height:10px;background:#2b2b2b}


  .ico-spinner {
    animation: spin-animation 1s infinite;
    animation-timing-function: linear;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loading-beer {
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dark-teal {  
  background-color: oklch(0.33 0.06 188.42 / 1);
  color: white;
}

.fly-icon {
  position: fixed;
  z-index: 2000;
  font-size: 1.5rem;
  pointer-events: none;
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}