/* static/css/application-form.css */

/* Basis-Styling für das Bewerbungsformular */
.application-form-container {
  max-width: 800px; /* Maximale Breite des Formulars */
  margin: 2rem auto; /* Zentrierung und Abstand oben/unten */
  padding: 2rem;
  background-color: #f9f9f9; /* Heller Hintergrund für den Formularbereich */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styling für Formular-Gruppen (Label + Input) */
.application-form__group {
  margin-bottom: 1.5rem; /* Abstand zwischen den Formulargruppen */
}

/* Styling für Labels */
.application-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333; /* Dunkle Textfarbe für gute Lesbarkeit */
}

/* Allgemeines Styling für Eingabefelder, Textareas und Selects */
.application-form__input,
.application-form__textarea,
.application-form__select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #0A605F;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.application-form__input:focus,
.application-form__textarea:focus,
.application-form__select:focus {
  border-color: #FCCA03; /* Blauer Rand bei Fokus (Beispiel, an Webflow-Primärfarbe anpassen) */
  outline: 0;
  /* box-shadow: 0 0 0 0.2rem rgba(10, 96, 95, 0.25); Leichter Schatten bei Fokus */
}

/* Spezifisches Styling für Textareas */
.application-form__textarea {
  min-height: 120px; /* Mindesthöhe für Textareas */
  resize: vertical; /* Erlaube nur vertikales Resizing */
}

/* Styling für Datei-Upload-Felder */
.application-form__input[type="file"] {
  padding: 0.5rem; /* Weniger Padding für Datei-Uploads */
}

/* Styling für den Absende-Button */
.application-form__button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  background-color: #0A605F; /* Blauer Hintergrund (Beispiel, an Webflow-Primärfarbe anpassen) */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.application-form__button:hover {
  background-color: #FCCA03; /* Dunklerer Blauton beim Hover */
  color: #0A605F;
}

/* Styling für die Checkbox-Gruppe (Datenschutz) */
.application-form__checkbox-group {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start; /* Stellt sicher, dass die Checkbox und das Label oben ausgerichtet sind */
}

.application-form__checkbox {
  margin-right: 0.5rem;
  margin-top: 0.2rem; /* Kleine Anpassung für vertikale Ausrichtung mit dem Text */
  width: 1.25em; /* Größe der Checkbox */
  height: 1.25em; /* Größe der Checkbox */
  accent-color: #0A605F; /* Farbe der Checkbox (Beispiel, an Webflow-Primärfarbe anpassen) */
}

.application-form__checkbox-label {
  font-weight: normal;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.4;
}

.application-form__checkbox-label a {
  color: #0A605F; /* Farbe für Links im Label (Beispiel) */
  text-decoration: underline;
}

/* Responsive Anpassungen */
@media (max-width: 767px) {
  .application-form-container {
    margin: 1rem;
    padding: 1.5rem;
  }
}

@media (max-width: 479px) {
  .application-form__input,
  .application-form__textarea,
  .application-form__select,
  .application-form__button {
    font-size: 0.9rem; /* Kleinere Schriftgröße auf sehr kleinen Bildschirmen */
  }

  .application-form__button {
    width: 100%; /* Button über die volle Breite */
    padding: 0.8rem 1rem;
  }
}
/* CSS-Klassen für JavaScript-generierte Nachrichten und Zustände */

/* Container für globale Formularnachrichten (Erfolg/Fehler bei Übermittlung) */
#form-messages {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 4px;
  display: none; /* Standardmäßig ausgeblendet, wird per JS angezeigt */
  text-align: center;
}

/* Erfolgsmeldung für das Formular */
.form-message.success-message {
  background-color: #d4edda; /* Heller Grünton */
  color: #155724; /* Dunkelgrüner Text */
  border: 1px solid #c3e6cb;
}

/* Fehlermeldung für das Formular (allgemein oder Übermittlung) */
.form-message.error-message {
  background-color: #f8d7da; /* Heller Rotton */
  color: #721c24; /* Dunkelroter Text */
  border: 1px solid #f5c6cb;
}

/* Informationsmeldung für das Formular (z.B. "Sende...") */
.form-message.info-message {
  background-color: #cce5ff; /* Heller Blauton */
  color: #0A605F; /* Dunkelblauer Text */
  border: 1px solid #FCCA03;
}


/* Styling für Fehlermeldungen direkt an den Feldern */
.error-message {
  display: block;
  color: #dc3545; /* Rote Farbe für Fehlermeldungen */
  font-size: 0.875rem; /* Etwas kleinere Schriftgröße */
  margin-top: 0.25rem; /* Kleiner Abstand zum Feld */
}

/* Visuelles Feedback für ungültige Felder */
.application-form__input.is-invalid,
.application-form__textarea.is-invalid,
.application-form__select.is-invalid,
.application-form__checkbox.is-invalid {
  border-color: #dc3545 !important; /* Roter Rand für ungültige Felder, !important um Fokus-Style zu überschreiben */
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; /* Leichter roter Schatten */
}

/* Styling für den Submit-Button im Ladezustand */
.application-form__button:disabled {
  background-color: #6c757d; /* Grauer Hintergrund für deaktivierten Button */
  cursor: not-allowed;
  opacity: 0.65;
}