.flex-container {
    width: 40%; /* Breite des Containers, der die Linien enthält */
    background-color: black; /* Schwarzer flexibler Container */
    padding: 20px;
    border-radius: 20px; /* Abgerundete Kanten */
    /* Leichter Schatten für den Container */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: white;
    text-align: center; /* Text zentriert */
  } 
  
  h1 {
    margin-bottom: 50px; /* Abstand unter der Überschrift */
  }
  
  p {
    margin-top: 50px; /* Abstand über dem Text 50px*/
    margin-bottom: 60px; /* Abstand unter dem Text 300px */
  }
  
  .container {
    width: 100%;
    height: 5px;
    background-color: black;
    position: relative;
  }
  
  .line {
    position: absolute;
    width: 0;
    height: 100%;
    background-color: white;
    /* Glow-Effekt für beide Linien */
    box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.32),
                0 0 16px 4px rgba(255, 255, 255, 0.16);
  }
  
  .white-line {
    background-color: white;
    /* Glow-Effekt in Weiß */
    box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.32),
                0 0 16px 4px rgba(255, 255, 255, 0.16);
  }
  
  .turquoise-line {
    background-color: #40e0d0; /* Türkisfarbe festgelegt */
    /* Glow-Effekt in Türkis */
    box-shadow: 0 0 7px 1px rgba(64, 224, 208, 0.32),
                0 0 16px 4px rgba(64, 224, 208, 0.16);
  }
  
  @keyframes drawLine {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  
  .line {
    animation: drawLine 3s ease forwards;
  }

  /* Dezenter Glanz und schwebender Schatten. */
  .flex-container {
    position: relative;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 12px 22px rgba(0, 0, 0, 0.3),
      0 32px 65px rgba(0, 0, 0, 0.36);
  }

  .flex-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 32%;
    border-radius: 50%;
    background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.18), transparent 72%);
    pointer-events: none;
  }

  .flex-container p {
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI Variable", "Segoe UI", sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.5;
    text-wrap: balance;
  }