:root {
  --grey-blue-200: #e0e7f0;
  --grey-blue-500: #7693ad;
  --green-500: #5db000;
  --grey-100: #f9f9fa;
  --grey-600: #4c566a;
  --blue-600: #2b76ff;

  /* Overwrite Bootstrap-Variables */
  --bs-body-font-size: 16px;
}

.bg-blue-600 {
  background-color: var(--blue-600) !important;
}

.bg-grey-blue-500 {
  background-color: var(--grey-blue-500) !important;
}

.bg-grey-blue-200 {
  background-color: var(--grey-blue-200) !important;
}

.bg-green-500 {
  background-color: var(--green-500) !important;
}

.bg-green-500 {
  background-color: var(--green-500) !important;
}

.bg-grey-100 {
  background-color: var(--grey-100) !important;
}

.bg-grey-600 {
  background-color: var(--grey-600) !important;
}

.border-green-500 {
  border-color: var(--green-500) !important;
}

.text-grey-100 {
  color: var(--grey-100) !important;
}

.text-grey-600 {
  color: var(--grey-600) !important;
}

.text-blue-600 {
  color: var(--blue-600) !important;
}

.ff-barlow {
  font-family: 'Barlow' !important;
}

.ff-cabin-sketch {
  font-family: 'Cabin Sketch' !important;
}

.ff-kalam {
  font-family: 'Kalam' !important;
}

.ff-permanent-marker {
  font-family: 'Permanent Marker' !important;
}

.ff-raleway {
  font-family: 'Raleway' !important;
}

.ff-rubik-vinyl {
  font-family: 'Rubik Vinyl' !important;
}

.ff-shrikhand {
  font-family: 'Shrikhand' !important;
}

.content-box {
  background: var(--bs-white);
  border-radius: .7rem;
  padding: 1.0rem;
}

.scroll-to-sug-jahrbuch-form {
  cursor: pointer;
}

.rotate {
  display: inline-block; /* Damit das span rotiert */
  animation: rotate 2s infinite; /* Animation 2 Sekunden, wiederholt sich unendlich */
}

#yearbookLanguageSelect {
  appearance: none; /* Entfernt das Standard-Icon */
  -webkit-appearance: none; /* Für WebKit-Browser */
  -moz-appearance: none; /* Für Firefox */
  position: relative;
}

.custom-select {
  position: relative;
}

.custom-select select {
  appearance: none;
  width: 100%;
  font-size: 1.15rem;
  padding: 0.675em 6em 0.675em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.custom-select::before,
.custom-select::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}



@keyframes rotate {
  0% {
    transform: rotate(0deg); /* Startwinkel */
  }
  100% {
    transform: rotate(360deg); /* Endwinkel (eine vollständige Umdrehung) */
  }
}

/* Overwrite Bootstrap */

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1000px;
  }
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1000px;
  }
}