/* ===== Base (Mobile First) ===== */

html {
  scroll-behavior: smooth;
  font-size: 100%;
}


body {
  background-color: #424242;

}

.navbar .nav-link {
  color: #e6b455;
  padding: 0.5rem 1rem;
  transition: 0.3s;
}

.navbar .nav-link:hover {
  color: #fff;
}

.hero-video {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.hero-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.hero-image {
  filter: brightness(60%) contrast(90%);
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

@media (max-width: 767px) {
  .hero-video {
    height: 50vh;
    /* weniger Höhe auf Handy */
  }

  .hero-text {
    bottom: 2rem;
    /* Text näher an die Mitte auf kleineren Bildschirmen */
    font-size: 1.5rem;
    /* Text kleiner */
  }
}



.hero-text {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}


.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.carousel-image-wrapper {
  width: 100%;
  height: 25rem;
  overflow: hidden;
  border-radius: 0.5rem;
}

.text-highlight {
  /*color: #dca53a;*/
  color: #e6b455;
}

section {
  scroll-margin-top: 5rem;
}

.marg {
  margin-top: 6.5rem;
}

.font-icon {
  font-size: 2rem;
}

.pricing-small {
  transform: scale(0.9);
}

.pricing-main {
  transform: scale(1.05);
  z-index: 2;
}

.rating {
  display: flex;
  gap: 0.5rem;
  font-size: 2rem;
}

.rating a {
  text-decoration: none;
  color: #ccc;
  transition: 0.2s;
  position: relative;
}

.rating:hover a {
  color: gold;
}

.rating a:hover~a {
  color: #ccc;
}

.instagram-icon {
  display: inline-block;
  background: radial-gradient(circle at 30% 107%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285AEB 90%);

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}



.modal-content {
  background-color: #ffffff;
}

.modal-dialog {
  max-width: 28rem; /* 448px */
  margin: 1rem auto; /* horizontal zentriert */
}

.modal-body p {
  line-height: 1.5;
}

@media (max-width: 576px) {
  .modal-dialog {
    margin: 1rem;
  }
}

/* Einzelne Farben für jeden Button */
#accept-cookies {
  background-color: #69c790;
  color: #424242;
}

#accept-cookies:hover {
  background-color: #219150;
  color: white;
}

#only-cookies {
  background-color: #e6b455;
  /* Orange */
}

#only-cookies:hover {
  background-color: #d9880f;
}

#decline-cookies {
  background-color: #ed7366;
  /* Rot */
}

#decline-cookies:hover {
  background-color: #c0392b;
}