@font-face {
  font-family: Allura;
  src: url('fonts/Allura-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Roboto;
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: ShadowsIntoLight;
  src: url('fonts/ShadowsIntoLight-Regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}
body {
  background-color: rgb(238, 222, 248);
  }


h1 {
  font-family: ShadowsIntoLight;
  font-size: 3rem;
  letter-spacing: 1px;
  background-color:rgb(191 175 201) !important ;
}

main {
  color: #333 !important;
}


.logo {
  width: 30%;
}

.bg-primary {
  background-color: rgb(191 175 201) !important;
}

.rotate {
  animation: 22s linear infinite spin;
  display: block;
  margin: 70px auto 0
}
.mittig {
  text-align: center;
}

@keyframes spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.btn,
.card {
  border-radius: 0rem !important;
}



.komd {
  width: 20%;
}

/** Größere Monitore **/
@media only screen and (min-width: 570px) {
  #mobil {
    display: none;
  }
}

/** Kleinere Monitore **/
@media only screen and (max-width: 600px) {

  #desktop,
  #spinner,
  .box {
    display: none;
  }

  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 576px) {
  #mobil{
    display:none;
  }
}
.podcast-wrapper {
  display: flex;
  align-items: flex-start; /* richtet Text und Bild oben aus */
  gap: 20px; /* Abstand zwischen Text und Bild */
}

.textbereich {
  flex: 1; /* Text nimmt den verfügbaren Platz ein */
}

.podcast-cover {
  width: 250px; /* gewünschte Breite des Covers */
  height: auto;
  border-radius: 8px; /* optional, für runde Ecken */
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-text {
  flex: 1; /* sorgt dafür, dass Text den Zwischenraum füllt */
}

.btn {
  margin-top: auto; /* Button nach unten schieben */
}

.btn-primary {
  background-color: rgb(191 175 201)  !important;
  border-color: rgb(191 175 201)  !important;
}

.btn-primary:hover {
  background-color: rgb(191 175 201)  !important;
  border-color: rgb(191 175 201)  !important;
}


.bi {
  color: rgb(191 175 201);
}