body {
  scroll-behavior: smooth;
}

.hero {
  background: linear-gradient(to right, #f8f9fa, #e2e6ea);
  padding: 80px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.hero .btn {
  margin-top: 10px;
}
footer {
  background-color: #f8f9fa;
  padding: 2rem 0;
  font-size: 0.9rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(50%); /* macht sie grau statt weiß */
}
#testimonialCarousel .carousel-inner {
  min-height: 200px; /* passe bei Bedarf an */
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f1f1f1;
  }

  /* Navbar */
  .navbar,
  .navbar-light,
  .bg-light {
    background-color: #1f1f1f !important;
    color: #f1f1f1 !important;
  }

  .navbar .navbar-nav .nav-link,
  .navbar-brand {
    color: #f1f1f1 !important;
  }

  .navbar .nav-link:hover,
  .navbar .nav-link.active {
    color: #0d6efd !important;
  }

  .dropdown-menu {
    background-color: #2a2a2a;
    color: #f1f1f1;
  }

  .dropdown-item {
    color: #f1f1f1;
  }

  .dropdown-item:hover {
    background-color: #3a3a3a;
  }

  /* Hero */
  .hero {
    background: linear-gradient(to right, #2a2a2a, #1f1f1f);
  }

  .hero h1,
  .hero p {
    color: #f1f1f1;
  }

  /* Cards */
  .card {
    background-color: #1e1e1e;
    color: #f1f1f1;
    border: 1px solid #333;
  }

  /* Outline Button Style */
  .btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: transparent;
  }

  .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
  }

  /* Fix disappearing text inside normal btn-primary */
  .btn-primary {
    color: #fff;
  }

  /* Carousel arrows */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(60%);
  }

  /* Form fields */
  .form-control,
  .form-control:focus {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border-color: #555;
  }

  .form-label {
    color: #f1f1f1;
  }
}

/* 1. Navbar: hellgraue Links im Darkmode, Logo bleibt weiß */
@media (prefers-color-scheme: dark) {
  .navbar-dark .navbar-nav .nav-link {
    color: #cccccc !important;
  }

  .navbar-dark .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
  }

  /* 2. Sprachwahl-Select: Darkmode-Fix */
  select.form-select {
    background-color: #212529;
    color: #f8f9fa;
    border-color: #444;
  }

  select.form-select:focus {
    border-color: #666;
    box-shadow: none;
  }
}

@media (prefers-color-scheme: dark) {
  .text-muted {
    color: #cccccc !important;
  }
}

/* Light mode Standard */
.cta-section {
  background-color: #ffffff;
  color: #212529;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .cta-section {
    background-color: #1e1e1e;
    color: #f8f9fa;
  }

  .cta-section h5,
  .cta-section p {
    color: #f8f9fa;
  }

  .cta-section .btn-outline-primary {
    color: #f8f9fa;
    border-color: #f8f9fa;
  }

  .cta-section .btn-outline-primary:hover {
    background-color: #f8f9fa;
    color: #000;
  }
}

/* Dark Mode: Hamburger-Menü-Icon weiß */
@media (prefers-color-scheme: dark) {
  .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
}

@media (prefers-color-scheme: dark) {
  .accordion-item {
    background-color: #1e1e1e; /* gleiche Farbe wie andere Cards */
    border: 1px solid #444;
    color: #f8f9fa;
  }

  .accordion-button {
    background-color: #1e1e1e;
    color: #f8f9fa;
  }

  .accordion-button:not(.collapsed) {
    background-color: #2a2a2a;
    color: #fff;
    box-shadow: none;
  }

  .accordion-body {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }

  .accordion-button::after {
    filter: invert(0.8); /* Caret sichtbar */
  }

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.animate-fade-up {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.animate-fade-in.delay-1 { animation-delay: 0.2s; }
.animate-fade-in.delay-2 { animation-delay: 0.4s; }
.animate-fade-up.delay-1 { animation-delay: 0.2s; }
.animate-fade-up.delay-2 { animation-delay: 0.4s; }
.animate-fade-up.delay-3 { animation-delay: 0.6s; }

.match-item, .match-slot {
  cursor: grab;
  user-select: none;
  transition: background-color 0.2s;
}

.match-slot.bg-light {
  background-color: #eef !important;
}

.match-slot.bg-success small {
  font-weight: 400;
}