/* =============================================================================
   FORMULARE – Eingabefelder, Labels, Validierung
   Claude-Ästhetik: Runde, warme Felder / UzK: Klar strukturiert
   ============================================================================= */

/* --- Form Wrapper --- */
.form-wrapper {
  max-width: 600px;
}

/* --- Form Item --- */
.form-item,
.js-form-item {
  margin-bottom: var(--space-6);
}

/* --- Labels --- */
label,
.form-item__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-uni-blau);
  margin-bottom: var(--space-2);
}

.form-required {
  color: var(--color-korall);
  margin-left: var(--space-1);
}

/* --- Eingabefelder --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 2px solid var(--color-sand-200);
  border-radius: var(--border-radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  line-height: var(--line-height-normal);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-sand-300);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-tuerkis);
  box-shadow: 0 0 0 4px var(--color-tuerkis-10);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select Pfeil */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23005176' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Fehlerzustand */
input.error,
textarea.error,
select.error {
  border-color: var(--color-korall);
  box-shadow: 0 0 0 4px var(--color-korall-10);
}

/* Erfolgszustand */
input.success,
textarea.success {
  border-color: var(--color-tuerkis);
}

/* --- Fehlermeldungen --- */
.form-item--error-message,
.form-item__error-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-korall);
  font-family: var(--font-sans);
}

.form-item--error-message::before {
  content: '⚠';
}

/* --- Hilfetext --- */
.description,
.form-item__description {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  font-family: var(--font-sans);
}

/* --- Checkboxen & Radio --- */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-sand-300);
  border-radius: var(--border-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
  margin-top: 2px;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked {
  background-color: var(--color-tuerkis);
  border-color: var(--color-tuerkis);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='white' d='M1 5l3.5 4L11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

input[type="radio"]:checked {
  border-color: var(--color-tuerkis);
  background-color: var(--color-white);
  background-image: radial-gradient(circle, var(--color-tuerkis) 40%, transparent 40%);
}

.form-type-checkbox label,
.form-type-radio label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-700);
}

/* --- Suche --- */
.search-form {
  display: flex;
  gap: var(--space-2);
}

.search-form input[type="search"] {
  border-radius: var(--border-radius-full);
  padding-left: var(--space-6);
}

.search-form button {
  border-radius: var(--border-radius-full);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-uni-blau);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-form button:hover {
  background-color: #004166;
}

/* --- Formular-Aktionsbereich --- */
.form-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-sand-200);
}