body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#e0e0e0;overflow:hidden;transition:background-color 0.3s ease}body.dark-mode{background-color:#121212;color:white}.dark-mode .footer{color:#1e90ff}.dark-mode .flip-card-front,.dark-mode .flip-card-back{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px)}.flip-container{perspective:1500px;width:250px;height:250px;transition:all 0.6s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.flip-card{width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s ease-in-out;border-radius:15px;background:transparent;transform-origin:center}.flip-container:hover .flip-card{transform:rotateY(180deg)}.flip-card-front{position:absolute;width:100%;height:100%;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:15px;box-shadow:0px 6px 20px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);display:flex;justify-content:center;align-items:center}.flip-card-back{position:absolute;width:100%;height:100%;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);transform:rotateY(180deg);border-radius:15px;box-shadow:0px 6px 20px rgba(0,0,0,0.2);display:flex;justify-content:center;align-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity 1s ease-in-out,visibility 0.3s ease}.flip-card-back form{width:100%;display:flex;flex-direction:column;align-items:center}.flip-card-back input{width:80%;padding:10px;margin:10px 0;background-color:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.5);border-radius:5px;color:white}.flip-card-back input::placeholder{color:rgba(255,255,255,0.7)}.flip-container:hover .flip-card .flip-card-back{border:2px solid #1e90ff;box-shadow:0 0 15px 5px rgba(30,144,255,0.8);visibility:visible;opacity:1}.background-flipcard{position:absolute;width:250px;height:250px;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);box-shadow:0px 6px 20px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.2);border-radius:15px;transform:rotate(0deg);opacity:0;transition:opacity 2s ease-in-out,transform 1s ease-in-out}.footer{position:absolute;bottom:20px;width:100%;text-align:center;font-family:'Dancing Script',cursive;font-size:24px;color:#1e90ff}.dark-mode-toggle{position:fixed;top:20px;right:20px;padding:10px;background-color:rgba(0,0,0,0.5);color:white;border:none;border-radius:50%;cursor:pointer;font-size:24px}.dark-mode .dark-mode-toggle{background-color:rgba(255,255,255,0.5)}
/* Styling für den Ladebalken */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #f3f3f3; /* Helle Hintergrundfarbe für den Ladebalken */
    visibility: hidden; /* Anfangs unsichtbar */
    z-index: 9999; /* Über den anderen Inhalten */
  }
  
  .loading-bar-progress {
    width: 0;
    height: 100%;
    background-color: #1e90ff; /* Ocean Blue für den Ladebalken */
    transition: width 0.5s ease-in-out; /* Sanfter Übergang für den Ladebalken */
  }