@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
  * {box-sizing: border-box;}
  body {
    background: #f6f5f7; display: flex; justify-content: center; align-items: center;
    flex-direction: column; font-family: 'Montserrat', sans-serif; height: 100vh; margin: -20px 0 50px;
  }
    body {
      min-height: 100vh;
      min-height: 100dvh;
    }

  h1 {font-weight: bold; margin: 0;}
  .sorry h1 {font-weight: bold; margin: 0; font-size: clamp(3em,8em,16em);}
  p {font-size: 14px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px;}
  span {font-size: 12px;}
  button {
    border-radius: 20px; border: 1px solid #9073ec; background-color: #6054df; color: #fff;
    font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase;
    transition: transform 80ms ease-in, box-shadow 80ms ease-in;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* leichter Schatten */
  }
  button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2); /* Schatten reduziert beim Drücken */
  }
  button:focus {outline: none;}
  button.ghost {background-color: transparent; border-color: #fff;}
  form {
    background-color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 0 50px; height: 100%; text-align: center;
  }
  input {background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%;}
  .container {
    background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px;
  }
  .form-container {position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out;}
  .sign-in-container {left: 0; width: 50%; z-index: 2;}
  .container.right-panel-active .sign-in-container {transform: translateX(100%);}
  .sign-up-container {left: 0; width: 50%; opacity: 0; z-index: 1;}
  .container.right-panel-active .sign-up-container {transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s;}
  @keyframes show {0%,49.99%{opacity:0;z-index:1;}50%,100%{opacity:1;z-index:5;}}
  .overlay-container {position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden;
    transition: transform 0.6s ease-in-out; z-index: 100;}
  .container.right-panel-active .overlay-container{transform: translateX(-100%);}
  .overlay {
    background: linear-gradient(to right, #1523ca, #a17ef1); color:#fff; position: relative; left: -100%;
    height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out;
  }
  .container.right-panel-active .overlay {transform: translateX(50%);}
  .overlay-panel {
    position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; transition: transform 0.6s ease-in-out;
  }
  .overlay-left {transform: translateX(-20%);}
  .container.right-panel-active .overlay-left {transform: translateX(0);}
  .overlay-right {right: 0; transform: translateX(0);}
  .container.right-panel-active .overlay-right {transform: translateX(20%);}


        .box {background:#fff; padding:30px; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,0.2); text-align:center;}
        a {color:#FF4B2B; text-decoration:none; font-weight:bold;}

    a {
        color: aliceblue;
    }

.sorry {
    color: #FF4B2B;
}

.overlay-left.sorry {
/*    color: blue; */ /* Nur Elemente, die beide Klassen haben */
transform: translateX(-0%);
}

p.sorry {
  font-size: clamp(1rem, 4vw, 1.3rem);
  line-height: 1.5;
}

a.sorry {
  display: inline-block;
  padding: 4px 6px;
}

/* Loader Overlay */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4); /* halbtransparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Spinner */
.spinner {
  border: 6px solid #f3f3f3; /* hellgrau */
  border-top: 6px solid #3498db; /* blau */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Spin Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Optional: sanftes Ausblenden */
.loader.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}



.hr-with-text {
  border: none;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 2em;
  margin: 20px 0;
  text-align: center;
  position: relative;
}

.hr-with-text::after {
  content: attr(data-text);
  background: #fff; /* gleiche Hintergrundfarbe wie deine Seite */
  padding: 0 10px;
  position: relative;
  top: 0.5em;
  color: #555;
  font-size: 14px;
}


/* ###########################  TEST #####################################*/


.fido2 {
    background-color: #007bff00; /* Blau */
    color: white;              /* Textfarbe */
    border: none;              /* Kein Rahmen */
    padding: 0px 0px;        /* Innenabstand */
    border-radius: 5px;        /* Abgerundete Ecken */
    cursor: pointer;           /* Maus zeigt Hand */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.fido2:hover {
    background-color: #6054df; /* Dunkleres Blau beim Hover */
    transform: scale(1.05);    /* Leichtes Vergrößern beim Hover */
}

.fido2:active {
    background-color: #004080; /* Noch dunkler beim Klicken */
    transform: scale(0.98);    /* Leichtes Drücken */
}

@media (max-width: 768px) {
  .overlay-panel {
    position: relative;
    width: 100%;
    padding: 20px;
    transform: none !important;
  }

  .overlay {
    width: 100%;
    left: 0;
    transform: none !important;
  }

  .overlay-left,
  .overlay-right {
    transform: none !important;
  }
}