/*   ico - form css    */


/* ------------------------------------*/
/*  content   */

/* Overlay Hintergrund mit Animation */
.ico-modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0; 
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.4s ease forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  overflow: hidden;
  width: 100%;
}

/* Modal Inhalt */
.ico-modal-content {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  max-width: 600px;
  width: calc(90% - 30px); 
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  animation: slideIn 0.4s ease forwards;
  margin-top: 120px;
  height: fit-content;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

/* Animationen */
@keyframes fadeIn {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.8); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ------------------------------------*/
/*  RESPONSIVE   */

@media screen and (max-height: 700px) {
    .ico-modal-content {
/*        max-height: 90vh;*/
        overflow-y: auto;
        margin: 5% auto;
    }
}

@media screen and (min-width: 500px) {
  .ico-modal-content {
    width: 80%;
  }
}

@media screen and (min-width: 768px) {
  .ico-modal-content {
    width: 70%;
    padding: 40px;
  }
}

@media screen and (min-width: 1080px) {
  .ico-modal-content {
    width: 600px;
  }
}