.playbutton {
  background: #1ABC9C;
  border-radius: 4px;
  border: solid #1ABC9C 0px;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 15px;
  text-decoration: none;
  /* Neue Eigenschaft für den Mauszeiger */
  cursor: pointer;
  /* Neue Eigenschaften für Flexbox, um das Icon zu zentrieren */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px; /* Breite reduziert für einen quadratischeren Look */
  height: 40px;  /* Feste Höhe */
  box-sizing: border-box;
}

.playbutton:hover {
  background: #19ab8e;
  text-decoration: none;
}

/* Container für die Icons, damit sie sich überlappen können */
.playbutton .icon-wrapper {
  position: relative;
  width: 14px;
  height: 16px;
}

/* Play-Icon (Dreieck) */
.playbutton .play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid white;
  position: absolute;
  top: 0;
  left: -1px; /* Um 2px nach links verschoben */
}

/* Pause-Icon (zwei Striche) */
.playbutton .pause-icon {
  width: 12px;
  height: 16px;
  position: absolute;
  top: 0;
  left: -1px; /* Um 2px nach links verschoben */
  display: none; /* Standardmäßig versteckt */
}

.playbutton .pause-icon::before,
.playbutton .pause-icon::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 16px;
  background-color: white;
  top: 0;
}

.playbutton .pause-icon::before {
  left: 0;
}

.playbutton .pause-icon::after {
  right: 0;
}

/* Zustand, wenn der Player spielt */
.playbutton.is-playing .play-icon {
  display: none;
}

.playbutton.is-playing .pause-icon {
  display: block;
}