/* =========================================================
   Formulare (Nachbau JetFormBuilder 3.6 + Hello-Elementor-Reset)
   Markup: src/partials/forms/*.html (tools/gen_forms.py) · Logik: assets/js/forms.js
   Varianten: .f-form--kontakt (post-171 #0d64983), .f-form--bewerber (post-606 #b6dd871),
              .f-form--bewerber-form (post-1516 #dae5943)
   ========================================================= */

/* ---------- Grundlagen ---------- */
.f-form { position: relative; }
.f-form.is-loading { opacity: .5; pointer-events: none; }

.f-form fieldset { min-width: 0; margin: 0; border: 0; }
/* legend als normales Flex-Item (statt „gerenderter Legende“) */
.f-form legend { float: left; width: 100%; padding: 0; }

.f-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  padding: 5px 0;
}
.layout-row .f-row { flex-wrap: nowrap; } /* Original-Custom-CSS: Zeilenlayout gestapelt */
.layout-row .f-col-start { flex: 0 0 auto; max-width: 30%; }
.f-col-end { flex: 1 1 auto; min-width: 0; }

.f-label { display: block; width: 100%; }
.f-desc { display: block; text-align: left; }
.f-desc small, .f-upload-hint small { font-size: 80%; }

.f-wrap { position: relative; width: 100%; }

/* Textfelder (Hello-Reset) */
.f-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
  border: 1px solid #666;
  border-radius: 3px;
  transition: all .3s;
}
.f-input:focus { border-color: #333; }
.f-textarea { display: inline-block; vertical-align: baseline; overflow: auto; resize: vertical; } /* inline-block wie im Original (Unterlängen-Abstand) */
.f-input[aria-invalid="true"] { border-color: var(--c-secondary); }

/* Radio/Checkbox (JetFormBuilder option-field) */
.f-options { display: flex; flex-direction: column; flex-wrap: wrap; gap: .7em; }
.layout-column .f-options { width: 100%; }
.f-option { position: relative; }
.f-check {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}
.f-check input {
  position: absolute;
  z-index: -1;
  margin: 0 5px 0 0;
  opacity: 0;
}
.f-check > span { display: flex; align-items: center; gap: 8px; }
.f-check > span::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}
.f-check--checkbox > span::before { border-radius: 10%; }
.f-check input:not(:disabled):not(:checked):hover + span::before { border-color: #b3d7ff; }
.f-check input:not(:disabled):active + span::before { background-color: #b3d7ff; border-color: #b3d7ff; }
.f-check input:focus:not(:checked) + span::before { border-color: #80bdff; }
.f-check--radio input:checked + span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.f-check--checkbox input:checked + span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
/* Tastaturfokus sichtbar machen (das echte Input ist ausgeblendet) */
.f-check input:focus-visible + span::before { outline: 2px solid var(--c-sky); outline-offset: 2px; }
.has-error .f-check > span::before { border-color: var(--c-secondary); }

/* Kacheln (JetFormBuilder advanced-choices) */
.f-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.f-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  border: 2px solid #bfbfbf;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s ease-out, outline 0s;
}
.f-choice * { cursor: pointer; }
.f-choice:has(input:focus-visible) { outline: 2px solid var(--c-sky); outline-offset: 2px; }
.f-choice-control { display: flex; align-items: center; gap: .5em; margin: 0; }
.f-choice-control input { margin: 0; }
.has-error .f-choice { border-color: var(--c-secondary); }

/* Buttons (Hello-Reset) */
.f-form button {
  display: inline-block;
  margin: 0;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: #c36;
  background-color: transparent;
  border: 1px solid #c36;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: all .3s;
}
.f-form button:hover, .f-form button:focus-visible { color: #fff; background-color: #c36; }
.f-actions { display: flex; flex-direction: row; align-items: flex-start; width: 100%; }
.f-form .f-submit { display: inline-flex; justify-content: flex-start; }
.f-form button:disabled { cursor: default; }

/* Datei-Upload */
.f-upload-content { position: relative; display: inline-flex; min-width: 100px; min-height: 100px; }
.f-upload-files { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.f-upload-file {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  background-color: rgba(123, 123, 123, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a7a7a' width='48px' height='48px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.f-form .f-upload-remove {
  position: absolute;
  inset: 50% 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0;
  background: rgba(0, 0, 0, .4);
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .2s linear;
}
.f-form .f-upload-remove:hover, .f-form .f-upload-remove:focus-visible { background: rgba(0, 0, 0, .4); }
.f-upload-file:hover .f-upload-remove, .f-upload-remove:focus-visible { opacity: 1; }
.f-upload-remove svg { display: block; width: 22px; height: 22px; }
.f-upload-remove svg path { fill: #fff; }
.f-upload-input { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; }

/* Mehrseitige Formulare: Fortschritt */
.f-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0 0 1.5em;
  list-style: none;
}
.f-progress-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5em;
}
.f-progress-step:not(:last-child) { flex: 1 1; }
.f-progress-step.is-active, .f-progress-step.is-passed { font-weight: 700; }
.f-progress-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5em 2em;
}
.f-progress-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  border: 1px solid grey;
  border-radius: 50%;
}
.f-progress-label {
  position: absolute;
  top: 100%;
  max-width: 300px;
  text-align: center;
  white-space: nowrap;
}
.f-progress-sep { flex: 1 1; height: 1px; background: grey; }

.f-page[hidden] { display: none; }
.f-heading { margin-block: .5rem 1rem; font-family: inherit; font-weight: 500; line-height: 1.2; }
.f-group { display: grid; gap: 0; }
.f-empty-p { margin: 0 0 .9rem; }

/* Meldungen */
.f-error {
  width: 100%;
  margin: 6px 0 0;
  font-family: var(--f-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-secondary);
}
.f-message { margin: 20px 0 0; padding: 20px; text-align: center; }
.f-message--success { color: #008000; border: 1px solid #008000; }
.f-message--error { color: #c00; border: 1px solid #c00; }

.f-sr, .f-hp, .f-hp input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.f-hp, .f-hp input { top: 0; left: 0; pointer-events: none; user-select: none; }

/* =========================================================
   Kontakt (Seite /kontakt/, einspaltig)
   ========================================================= */
.f-form--kontakt .f-row { margin-block: 10px; }
.f-form--kontakt .f-label {
  margin: 0 0 10px;
  padding: 5px 15px 0;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--c-primary);
  border-radius: 5px 5px 2px 5px;
}
.f-form--kontakt .f-req { color: var(--c-secondary); }
.f-form--kontakt .f-input {
  padding: 12px 15px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  background-color: #F8F8F8;
  border: 1px solid #004A992B;
  border-radius: 0 0 5px 5px;
  color-scheme: normal;
}
.f-form--kontakt .f-input::placeholder { color: #000; }
.f-form--kontakt .f-input[aria-invalid="true"] { border-color: var(--c-secondary); }
.f-form--kontakt .f-textarea { height: 111px; min-height: 111px; }
.f-form--kontakt .f-choice-label { width: 100%; }
.f-form--kontakt .f-actions { justify-content: flex-start; }
.f-form--kontakt .f-submit {
  justify-content: center;
  padding: 15px 30px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--c-primary);
  border: 0;
}
.f-form--kontakt .f-submit:hover, .f-form--kontakt .f-submit:focus-visible { color: #fff; background-color: var(--c-secondary); }
.f-form--kontakt .f-submit strong { font-weight: 700; } /* <strong> in 600 → „bolder“ = 900; Original rendert 700 (lokale Montserrat ohne 900) */

/* =========================================================
   Bewerber (Seite /bewerber/, mehrseitig) + Bewerber-Formular (/bewerber/form/)
   ========================================================= */
.f-form--bewerber .f-row, .f-form--bewerber-form .f-row { margin: 0 0 20px; }
.f-form--bewerber .f-label, .f-form--bewerber-form .f-label { font-size: 16px; text-align: left; color: #000; }
.f-form--bewerber .f-label { font-family: var(--f-text); font-weight: 400; }
.f-form--bewerber-form .f-label { font-family: var(--f-sys); font-weight: 400; } /* Original 500 + „Source Sans Pro“ → Fallback ohne 500 → sichtbar regular */
.f-form--bewerber-form .f-req { color: var(--c-secondary); }
.f-form--bewerber .f-options { flex-direction: row; gap: 30px; }
.f-form--bewerber-form .f-options { flex-direction: column; gap: 30px; }
.f-form--bewerber .f-check, .f-form--bewerber-form .f-check {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
}
.f-form--bewerber .f-check { font-family: var(--f-text); padding: 30px; border-radius: 10px; }
.f-form--bewerber-form .f-check { font-family: var(--f-sys); font-weight: 400; }
.f-form--bewerber .f-check--checkbox, .f-form--bewerber-form .f-check--checkbox { gap: 10px; padding: 10px; background: none; }
.f-form--bewerber .f-check > span, .f-form--bewerber-form .f-check > span { gap: 10px; }
.f-form--bewerber .f-check > span::before, .f-form--bewerber-form .f-check > span::before { font-size: 15px; }
.f-form--bewerber .f-input, .f-form--bewerber-form .f-input {
  padding: 10px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  border-radius: 10px;
  color-scheme: normal;
}
.f-form--bewerber .f-input { background-color: #fff; }
.f-form--bewerber-form .f-input { background-color: #F4F8FB; }
.f-form--bewerber .f-input[aria-invalid="true"], .f-form--bewerber-form .f-input[aria-invalid="true"] { border-color: var(--c-secondary); }
.f-form--bewerber .f-submit, .f-form--bewerber-form .f-submit {
  margin: 0;
  padding: 12px 30px;
  font-family: var(--f-text);
  color: #fff;
  background-color: var(--c-primary);
  border-radius: 10px;
}

/* Bewerber: Schritt-Navigation */
.f-form--bewerber .f-nav { padding: 20px 0 0; text-align: center; }
.f-form--bewerber .f-next, .f-form--bewerber .f-prev {
  padding: 12px 30px;
  color: #fff;
  border: 0;
  border-radius: 10px;
}
.f-form--bewerber .f-next { margin: 0 0 0 15px; background-color: var(--c-primary); }
.f-form--bewerber .f-prev { margin: 0 15px 0 0; background-color: var(--c-secondary); }
.f-form--bewerber .f-heading { font-size: 36px; color: #000; }

/* Bewerber: Fortschrittsanzeige */
.f-form--bewerber .f-progress { margin: 0; padding: 0 0 10px; color: var(--c-secondary); }
.f-form--bewerber .f-progress-item {
  margin: 0;
  padding: 5px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--c-secondary);
}
.f-form--bewerber .f-progress-circle { border: 3px dotted var(--c-secondary); }
.f-form--bewerber .f-progress-sep { height: 4px; min-height: 4px; background-color: var(--c-secondary); }
.f-form--bewerber .is-active .f-progress-item { font-size: 18px; color: var(--c-primary); }
.f-form--bewerber .is-active .f-progress-circle { border: 2px solid var(--c-primary); }
.f-form--bewerber .is-active .f-progress-sep { height: 5px; min-height: 5px; background-color: var(--c-primary); }
.f-form--bewerber .is-passed .f-progress-item { color: var(--c-primary); }
.f-form--bewerber .is-passed .f-progress-circle { border: 2px solid var(--c-primary); }
.f-form--bewerber .is-passed .f-progress-sep { height: 5px; min-height: 5px; background-color: var(--c-primary); }

/* =========================================================
   Tablet ≤ 1024px
   ========================================================= */
@media (max-width: 1024px) {
  .f-form--kontakt .f-label { line-height: 1.5; }
  .f-form--kontakt .f-input { line-height: 1.5; }
  .f-form--kontakt .f-submit { line-height: 1.5; }
}

/* =========================================================
   Mobil ≤ 767px
   ========================================================= */
@media (max-width: 767px) {
  .f-form--kontakt .f-label { line-height: 1.4; }
  .f-form--kontakt .f-input { line-height: 1.4; }
  .f-form--kontakt .f-submit { line-height: 1.4; }

  .f-form--bewerber .f-progress { display: grid; grid-template-columns: 1fr 1fr; row-gap: 27px; }
  .f-form--bewerber .f-progress-label { left: 0; }
  .f-form--bewerber .f-heading { font-size: 20px; line-height: 1.4; }
}