.split-alien {
    flex-wrap: wrap;
    min-height: 60vh;
    position: relative;
  }
  
  .area-1,
  .area-2 {
    width: 50%;
    min-height: 300px;
    padding: 2rem;
  }
  
  @media (max-width: 992px) {
    .area-1,
    .area-2 {
      width: 100%;
    }
  }
  
  /* Bildgröße */
  .alien {
    max-width: 500px;
    height: auto;
  }
  
  /* Sprechblase */
  .speech-bubble {
    position: absolute;
    background: #fff;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 16px 24px;
    max-width: 300px;
    font-size: 1.5rem;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    margin: 0;
    top: 200px;
    left: 105px;
  }
  
  /* Dreieck links */
  .speech-bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
  }
  
  /* Optional Schatten für das Dreieck */
  .speech-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    border-width: 11px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    z-index: -1;
  }
  
  .bubble-left::after {
    left: auto;
    right: -20px;
    border-color: transparent transparent transparent #fff;
  }
  
  .bubble-left::before {
    left: auto;
    right: -22px;
    border-color: transparent transparent transparent #333;
  }
  
  .split:nth-child(odd) .speech-bubble::after {
    left: -30px;
    border-right-color: #fff;
  }
  
  .split:nth-child(even) .speech-bubble::after {
    right: -30px;
    border-left-color: #fff;
  }

  .fade-element {
    opacity: 0;
    transform: translateY(40px);
  }

  .fade-in-left,
.fade-in-right {
  opacity: 0;
}

.fade-in-left {
  transform: translateX(-50px);
}

.fade-in-right {
  transform: translateX(50px);
}

.justify-content-right {
    justify-content: right !important;
}
.align-items-right {
    align-items: right !important;
}

/* Mobilanpassung */
@media (max-width: 768px) {
  .split-alien .d-flex,
  .split-alien .d-lg-flex {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
  }

  .speech-bubble {
    max-width: 55%;
    padding: 0.5rem 0.75rem;
    line-height: 1.3;
    top: 100px;
    left: 0 !important;
  }

  .alien {
    width: 300px;
    height: auto;
	  margin-left: 15em;
  }
}

@media (max-width: 1200px) {
  .alien {
    max-width: 400px;
    height: auto;
    margin-left: 15em;
  }
  .speech-bubble {
    left: 50px;
  }
}