/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* removing gutter did not work - removing margins works */
header.gallery {
  margin-right: -12px;
  margin-left:  -12px;
  }

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
.carousel-indicators [data-bs-target] { 
  /* changing the style from lines to circles */
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

/* Below FIXED HEIGHT declarations were adopted from original BS5 code before - but caused issues! */
/* Copy: Declare heights because of positioning of img element - CHANGED from 24rem to 400px */
/* Height declaration NOW commented out - caused elements other then image to drift outside on sm-md sizes */
/* .carousel-item { height: 400px; }
*/

/* These declaration of 50% and transform-translate keep the contents in place for responsiveness */
.carousel-caption {
  bottom: 50%;
  transform: translate(0, 50%);
}
.carousel-caption h1 {
  font-size: 1.5rem;
}
/* slide text font and colors */
.carousel-caption h1 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.carousel-caption h1.color-black {
  color: #000000;
}
.carousel-caption h1.color-white {
  color: #ffffff;
}


.carousel-caption a.btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: #008930; /* darker than logo green: #008930; logo-green: #00A239; previous good green: #39723d */
    --bs-btn-border-color: #39723d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007228;
    --bs-btn-hover-border-color: #145118;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #145118;
    --bs-btn-active-border-color: #0c3f0e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #39723d;
    --bs-btn-disabled-border-color: #39723d;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media only screen and (max-width: 520px) {
  .carousel-indicators [data-bs-target] { 
    display: none;
  }
}
@media only screen and (max-width: 479px) {
  .carousel-caption a.btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
  }
}
@media only screen and (max-width: 479px) {
  .carousel-caption h1.title-svb {
    font-size:1.25rem;
    }
}
@media only screen and (min-width: 480px) and (max-width: 519px) {
  .carousel-caption h1.title-svb {
    font-size:1.4rem;
    }
}
@media only screen and (min-width: 520px) and (max-width: 560px) {
  .carousel-caption h1.title-svb {
    font-size:1.567rem;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .carousel-caption h1 {
    font-size:1.6rem;
    }
  .carousel-caption a.btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-caption h1 {
    font-size:1.8rem;
    }
}
@media screen and (min-width: 992px) {
  .carousel-caption h1 {
        font-size: 2.65rem;
    }
}

/* === FIX: Mindesthöhe für Startseiten-Galerie auf Mobil === */
@media (max-width: 991px) {
  header.gallery {
    height: 260px !important;
  }
  header.gallery .carousel,
  header.gallery .carousel-inner,
  header.gallery .carousel-item {
    height: 100%;
  }
  header.gallery .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* === Startbild-Position wegen Sichtbarkeit des Logo === */
@media (max-width: 991px) {
  .start-slide img {
    object-position: 70% center;
  }
}

/* === Positioning - Bild-Mitte mehr nach rechts wegen Schrift-Untergrund === */
@media (max-width: 991px) {
  .badminton-slide img {
    object-position: 5% center;
  }

  .gymnastik-slide img {
    object-position: 26% center;
  }

  .kraftsport-slide img {
    object-position: 10% center;
  }

  .leichtathletik-slide img {
    object-position: 10% center;
  }

  .showdance-slide img {
    object-position: 26% center;
  }

  .tennis-slide img {
    object-position: 22% center;
  }

  .volleyball-slide img {
    object-position: 32% center;
  }
}