/* =========================================
   1. Farben - MediumVioletRed Variante
   ========================================= */

:root {
  --bg: #4b1a40;
  --bg-shadow: #5c254d;
  --bg-sub: #602a55;
  --hover: #a0327a;
  --focus: #ff66b2;
  --bg-trans: rgba(75, 26, 64, 0.95);
}


/* =========================================
   2. Hero-Bereich
   ========================================= */

.hero {
  background-image: url('../images/start/bg_start.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  height: 300px;
  height: 45vh;

  width: 100%;
  margin-top: 0;
}


/* =========================================
   3. Feature-Section
   ========================================= */

main .features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Ersatz für flex gap */
  margin: -1rem;
}


/* Einzelne Feature-Karten */

main .features article {
  flex: 1 1 18rem;

  margin: 1rem;

  border: 1px solid #ddd;
  border-radius: 10px;

  padding: 1.5rem;

  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* =========================================
   4. Feature-Icons
   ========================================= */

main .icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}


/* =========================================
   5. Links und Buttons
   ========================================= */

main a {
  display: inline-block;

  padding: 0.5rem 1rem;

  background: #138496;
  background: linear-gradient(
    to bottom,
    #17a2b8 0%,
    #138496 100%
  );

  color: white;
  text-decoration: none;

  border-radius: 0.3rem;
  border: 1px solid #0f6674;

  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);

  transition:
    background 0.2s,
    transform 0.1s,
    box-shadow 0.1s;
}


/* Hover */

main a:hover {
  background: linear-gradient(
    to bottom,
    #138496 0%,
    #117a8b 100%
  );

  transform: translateY(-2px);

  box-shadow:
    0 5px 8px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}


/* Aktiv */

main a:active {
  transform: translateY(0);

  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}


/* =========================================
   6. Responsive Feature-Section
   ========================================= */

@media (max-width: 62.4375rem) {

  main .features {
    flex-direction: column;
  }

  main .features article {
    flex: none;
  }
}


/* =========================================
   7. Carousel - Grundeinstellungen
   ========================================= */

main .carousel-section {
  position: relative;

  width: 100%;
  margin: 2rem 0;

  overflow: hidden;
}


/* Carousel Inner */

main .carousel-section .carousel-inner {
  position: relative;

  width: 100%;
  height: auto;
}


/* =========================================
   8. Carousel Items
   ========================================= */

main .carousel-section .carousel-item {
  display: none;
  position: relative;
}


/* Aktives Bild */

main .carousel-section .carousel-item.active {
  display: block;
}


/* Bilder */

main .carousel-section .carousel-item img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================
   9. Carousel Caption
   ========================================= */

main .carousel-section .carousel-caption {
  position: absolute;

  bottom: 0;
  left: 0;
  right: 0;

  padding: 1rem;

  text-align: center;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    transparent 70%
  );

  color: white;

  /* Ersatz für clamp() */
  font-size: 1rem;

  line-height: 1.4;

  box-sizing: border-box;

  max-height: 30%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  word-wrap: break-word;
}


/* Text innerhalb der Caption */

main .carousel-section .carousel-caption p {
  color: white;
  font-size: 1rem;
}


/* =========================================
   10. Carousel Pfeile
   ========================================= */

main .carousel-section .carousel-control {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 60px;

  font-size: 2rem;
  color: white;

  border: none;

  cursor: pointer;

  opacity: 0;

  transition: opacity 0.3s;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* Vorheriger Slide */

main .carousel-section .carousel-control.prev {
  left: 0;

  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    transparent
  );
}


/* Nächster Slide */

main .carousel-section .carousel-control.next {
  right: 0;

  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    transparent
  );
}


/* Pfeile bei Mausberührung anzeigen */

main .carousel-section:hover .carousel-control {
  opacity: 1;
}


/* Pfeile bei Tastaturbedienung anzeigen */

main .carousel-section .carousel-control:focus {
  opacity: 1;
}


/* =========================================
   11. Carousel Indikatoren
   ========================================= */

main .carousel-section .carousel-indicators {
  position: absolute;

  bottom: 10px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;

  list-style: none;

  padding: 0;
  margin: 0;
}


/* Einzelne Indikatoren */

main .carousel-section .carousel-indicators li {
  width: 12px;
  height: 12px;

  margin: 0 0.25rem;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.7);

  cursor: pointer;
}


/* Aktiver Indikator */

main .carousel-section .carousel-indicators li.active {
  background: #17a2b8;
}


/* =========================================
   12. Responsive Anpassungen
   ========================================= */

@media (max-width: 600px) {

  main .carousel-section .carousel-caption {
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  main .carousel-section .carousel-caption p {
    font-size: 0.9rem;
  }

  main .carousel-section .carousel-control {
    width: 40px;
    font-size: 1.5rem;
  }
}