/*!
 * Engin Sakul
 * Hausaufgabe: HTML-Projekt
 * 06.02.2022
 */

/* Bootstrap Anpassungen & Erweiterung */
.rounded-4 {
  border-radius: 0.5rem !important;
}

.rounded-5 {
  border-radius: 0.75rem !important;
}

.rounded-6 {
  border-radius: 1rem !important;
}

.text-black-75 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.75) !important;
}
.navbar.navbar-engin {
  width: 90vw;
  max-width: 720px;
  margin-bottom: 1.5rem;
  z-index: 999;
}

.navbar.navbar-engin ul.nav {
  --bs-scroll-height: 60px;
}

.navbar.navbar-engin ul.nav > li > a:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

/* Kreisel auf der Startseite */
.img-kreisel {
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.img-kreisel-1 {
  object-position: center 29%;
}

.img-kreisel-2 {
  object-position: center;
}

.img-kreisel-3 {
  object-position: center 85%;
}

/* Titlbild der Schwerpunkte */
#bild-top-skaten {
  height: auto;
  background-image: url(../img/skaten/bild-top.jpg);
  background-attachment: local;
  background-size: cover;
  background-position: center;
}

.maske {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  backdrop-filter: blur(2px) saturate(180%);
}

/* iframe - YouTube-Video */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Erzeugt das 16:9-Format, weil 9 / 16 x 100 = 56,25 */
  padding-top: 0;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Weitere Anpassungen */
.circle-list {
  list-style-type: circle;
}

.rotate-90::before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}