body {
    font-family: Arial, sans-serif;
    padding: 40px;
    background: hwb(0 1% 99% / 0.948);
  }
  
  .animated-underline {
    position: relative;
    display: inline-block;
    color: hsl(262, 78%, 40%);
    padding-bottom: 8px;
    font-size: 2.5rem;
  }
  
  .animated-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: hsl(171, 100%, 50%);
    transform: scaleX(0);
    transform-origin: left;
    animation: underline-anim 2.5s cubic-bezier(0.4,0,0.2,1) forwards;
    animation-delay: 0s;
    /* Damit die Animation nur beim Laden einmalig läuft */
  }
  
  @keyframes underline-anim {
    to {
      transform: scaleX(1);
    }
  }
  
  /* Automatische Wiederholung alle 5 Sekunden mit Animation-Reset */