html,
 body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background: #000;
     display: flex;
     justify-content: center;
     align-items: center;
     /* Wichtig für den 3D-Effekt der Sterne */
     perspective: 340px;
 }

 /* Die Box in der Mitte */
 .welcome-box {
     position: relative;
     z-index: 1000;
     /* Vor den Sternen */
     background: rgba(255, 255, 255, 0.05);
     padding: 50px 100px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(15px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
     text-align: center;
     color: white;
     font-family: "Segoe UI", sans-serif;
     max-width: 600px;
 }

 .welcome-box h1 {
     margin: 0;
     font-size: 4rem;
     font-weight: 200;
     letter-spacing: 10px;
     text-transform: uppercase;
     text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
 }

 /* Starfield Simulation */
 .stars {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 2px;
     height: 2px;
     border-radius: 50%;
     /* Hier werden die Sterne via Box-Shadow generiert */
     box-shadow:
         -120px 450px #ccc,
         800px -300px #fff,
         -450px -150px #ddd,
         200px 100px #eee,
         -800px 400px #bbb,
         500px -450px #fff,
         /* ... (stark gekürzt, im fertigen Code unten sind es hunderte) */
         742px -12px #fff,
         -342px 189px #ddd,
         54px -432px #eee;
     animation: fly 3s linear infinite;
     transform-style: preserve-3d;
 }

 /* Die Ebenen davor und dahinter */
 .stars:before,
 .stars:after {
     content: "";
     position: absolute;
     width: inherit;
     height: inherit;
     box-shadow: inherit;
     /* Kopiert die Sternenkarte */
     border-radius: inherit;
 }

 .stars:before {
     transform: translateZ(-300px);
     animation: fade1 3s linear infinite;
 }

 .stars:after {
     transform: translateZ(-600px);
     animation: fade2 3s linear infinite;
 }

 /* Animationen */
 @keyframes fly {
     from {
         transform: translateZ(0px);
     }

     to {
         transform: translateZ(300px);
     }
 }

 @keyframes fade1 {
     from {
         opacity: 0.5;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes fade2 {
     from {
         opacity: 0;
     }

     to {
         opacity: 0.5;
     }
 }