/* ============================
   v20-formularupdate.css
   Styles für das Langformular + Modal
   ============================ */

/* Grundlayout */
.v20-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* Labels & Inputs */
.v20-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.v20-form input,
.v20-form select,
.v20-form textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.v20-form input:focus,
.v20-form select:focus,
.v20-form textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Button */
.v20-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2563eb;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.v20-btn:hover {
  background-color: #1d4ed8;
}

/* Trenner */
.v20-form hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

/* Modal Overlay */
#v20-modal {
  background-color: rgba(0, 0, 0, 0.45);
}

#v20-modal.hidden {
  display: none;
}

/* Modal-Box */
#v20-modal > div {
  animation: fadeInUp 0.25s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal-Schließen-Button */
.v20-modal-close {
  background: #f3f4f6;
  color: #111827;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: background 0.2s;
}

.v20-modal-close:hover {
  background: #e5e7eb;
}



/* Banner */

.v20-banner {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.v20-banner-create {
  background-color: #e0f2fe;
  color: #0369a1;
}

.v20-banner-update {
  background-color: #ecfccb;
  color: #3f6212;
}


/* Wrapper */


.v20-formular-wrapper {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#v20-lf-wrap[data-state="loading"] #v20-longform { display:none; }
#v20-lf-wrap[data-state="loading"] #v20-lf-loading { display:block; }

#v20-lf-wrap[data-state="ready"]   #v20-longform { display:block; }
#v20-lf-wrap[data-state="ready"]   #v20-lf-loading { display:none; }
#v20-lf-loading { padding: 1rem; opacity: .8; }