/* ============================================================
   ONLINE-BEWERBUNG (Page-ID 317) — Prefix ob-
   Werte 1:1 aus Oxygen 317.css + universal.css
   (Element-IDs: section-4-317, new_columns-5-317,
   div_block-6/7/8/10/12/14/24-317, image-9/11/13/25-317).
   Enthaelt zusaetzlich die FluentForm-Overrides aus universal.css
   (laden im Original global, hier nur auf dieser Seite noetig).
   ============================================================ */

/* ---------- Section (Original: #section-4-317) ---------- */

.ob-section {
  text-align: right;
  position: relative;
}

.ob-section .section-inner {
  padding-top: 203px;
  padding-right: 50px;
  padding-left: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Spalten (Original: #new_columns-5-317) */
.ob-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  z-index: 5;
}

/* Bilder-Spalte (Original: #div_block-6-317) */
.ob-col-images {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 20px 20px 20px 0;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
}

/* Kollage-Wrapper (Original: #div_block-7-317, Breite = fit-content) */
.ob-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.ob-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Original: #div_block-10-317 */
.ob-photo-2 {
  text-align: right;
  margin-top: -341px;
}

/* Original: #div_block-12-317 */
.ob-photo-3 {
  text-align: center;
  margin-top: -143px;
}

.ob-img {
  max-width: 100%;
}

/* Original: #image-9-317 */
.ob-img-1 {
  max-width: 700px;
  aspect-ratio: 740 / 510;
  object-fit: cover;
  border-radius: 15px;
  width: 696px;
  height: 480px;
  object-position: left;
}

/* Original: #image-11-317 */
.ob-img-2 {
  max-width: 520px;
  aspect-ratio: 520 / 420;
  object-fit: cover;
  border-radius: 15px;
  margin-left: 378px;
  width: 520px;
  height: 420px;
}

/* Original: universal.css Zusatzregel */
@media only screen and (min-width: 1401px) and (max-width: 1600px) {
  .ob-img-2 {
    margin-left: 250px !important;
  }
}

/* Original: #image-13-317 */
.ob-img-3 {
  max-width: 590px;
  aspect-ratio: 590 / 405;
  object-fit: cover;
  border-radius: 15px;
  margin-left: 112px;
  width: 590px;
  height: 405px;
  object-position: bottom;
}

/* Original: .hover2show (universal.css) */
.ob-img:hover {
  z-index: 999;
  transition-duration: 0.2s;
  box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.32);
}

/* Formular-Spalte (Original: #div_block-14-317) */
.ob-col-form {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 110px 0 20px 136px;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  z-index: 2;
  position: relative;
}

/* Original: #shortcode-3-317 */
.ob-form {
  max-width: 1000px;
  color: #fdfeff;
}

/* Blob mit Blur (Original: #div_block-24-317 .has-blured-background) */
.ob-blur {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.ob-blur::after {
  /* Statischer Gradient-Ersatz für die Original-Ellipse (650% x 80%, #004270,
     filter: blur(350px)) — iOS-Safari hängt bei Laufzeit-Blur auf großen Flächen.
     Box = Ellipse + 2×3σ (σ = 350px). Vertikalprofil als Hintergrund-Gradient,
     Horizontalprofil als Maske (Produkt ≈ 2D-Gauß-Faltung, Fehler < 0.04 Alpha). */
  content: "";
  width: calc(650% + 2100px);
  height: calc(80% + 2100px);
  position: absolute;
  top: 50%;
  right: calc(-300% - 1050px);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,66,112,0) 0%,
    rgba(0,66,112,0.006) 6.03%,
    rgba(0,66,112,0.013) 9.42%,
    rgba(0,66,112,0.026) 12.8%,
    rgba(0,66,112,0.049) 16.18%,
    rgba(0,66,112,0.085) 19.56%,
    rgba(0,66,112,0.138) 22.94%,
    rgba(0,66,112,0.211) 26.33%,
    rgba(0,66,112,0.301) 29.71%,
    rgba(0,66,112,0.405) 33.09%,
    rgba(0,66,112,0.513) 36.47%,
    rgba(0,66,112,0.614) 39.85%,
    rgba(0,66,112,0.696) 43.24%,
    rgba(0,66,112,0.75) 46.62%,
    rgba(0,66,112,0.769) 50%,
    rgba(0,66,112,0.75) 53.38%,
    rgba(0,66,112,0.696) 56.76%,
    rgba(0,66,112,0.614) 60.15%,
    rgba(0,66,112,0.513) 63.53%,
    rgba(0,66,112,0.405) 66.91%,
    rgba(0,66,112,0.301) 70.29%,
    rgba(0,66,112,0.211) 73.67%,
    rgba(0,66,112,0.138) 77.06%,
    rgba(0,66,112,0.085) 80.44%,
    rgba(0,66,112,0.049) 83.82%,
    rgba(0,66,112,0.026) 87.2%,
    rgba(0,66,112,0.013) 90.58%,
    rgba(0,66,112,0.006) 93.97%,
    rgba(0,66,112,0) 100%);
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.004) 4.44%,
    rgba(0,0,0,0.013) 7.12%,
    rgba(0,0,0,0.034) 9.8%,
    rgba(0,0,0,0.075) 12.48%,
    rgba(0,0,0,0.145) 15.16%,
    rgba(0,0,0,0.247) 17.84%,
    rgba(0,0,0,0.372) 20.52%,
    rgba(0,0,0,0.505) 23.2%,
    rgba(0,0,0,0.631) 25.88%,
    rgba(0,0,0,0.737) 28.56%,
    rgba(0,0,0,0.819) 31.24%,
    rgba(0,0,0,0.879) 33.92%,
    rgba(0,0,0,0.923) 36.6%,
    rgba(0,0,0,0.954) 39.28%,
    rgba(0,0,0,0.975) 41.96%,
    rgba(0,0,0,0.989) 44.64%,
    rgba(0,0,0,0.997) 47.32%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0.997) 52.68%,
    rgba(0,0,0,0.989) 55.36%,
    rgba(0,0,0,0.975) 58.04%,
    rgba(0,0,0,0.954) 60.72%,
    rgba(0,0,0,0.923) 63.4%,
    rgba(0,0,0,0.879) 66.08%,
    rgba(0,0,0,0.819) 68.76%,
    rgba(0,0,0,0.737) 71.44%,
    rgba(0,0,0,0.631) 74.12%,
    rgba(0,0,0,0.505) 76.8%,
    rgba(0,0,0,0.372) 79.48%,
    rgba(0,0,0,0.247) 82.16%,
    rgba(0,0,0,0.145) 84.84%,
    rgba(0,0,0,0.075) 87.52%,
    rgba(0,0,0,0.034) 90.2%,
    rgba(0,0,0,0.013) 92.88%,
    rgba(0,0,0,0.004) 95.56%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.004) 4.44%,
    rgba(0,0,0,0.013) 7.12%,
    rgba(0,0,0,0.034) 9.8%,
    rgba(0,0,0,0.075) 12.48%,
    rgba(0,0,0,0.145) 15.16%,
    rgba(0,0,0,0.247) 17.84%,
    rgba(0,0,0,0.372) 20.52%,
    rgba(0,0,0,0.505) 23.2%,
    rgba(0,0,0,0.631) 25.88%,
    rgba(0,0,0,0.737) 28.56%,
    rgba(0,0,0,0.819) 31.24%,
    rgba(0,0,0,0.879) 33.92%,
    rgba(0,0,0,0.923) 36.6%,
    rgba(0,0,0,0.954) 39.28%,
    rgba(0,0,0,0.975) 41.96%,
    rgba(0,0,0,0.989) 44.64%,
    rgba(0,0,0,0.997) 47.32%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0.997) 52.68%,
    rgba(0,0,0,0.989) 55.36%,
    rgba(0,0,0,0.975) 58.04%,
    rgba(0,0,0,0.954) 60.72%,
    rgba(0,0,0,0.923) 63.4%,
    rgba(0,0,0,0.879) 66.08%,
    rgba(0,0,0,0.819) 68.76%,
    rgba(0,0,0,0.737) 71.44%,
    rgba(0,0,0,0.631) 74.12%,
    rgba(0,0,0,0.505) 76.8%,
    rgba(0,0,0,0.372) 79.48%,
    rgba(0,0,0,0.247) 82.16%,
    rgba(0,0,0,0.145) 84.84%,
    rgba(0,0,0,0.075) 87.52%,
    rgba(0,0,0,0.034) 90.2%,
    rgba(0,0,0,0.013) 92.88%,
    rgba(0,0,0,0.004) 95.56%,
    rgba(0,0,0,0) 100%);
}

/* Original: #image-25-317 */
.ob-blur-img {
  position: relative;
  z-index: 5;
  width: 538px;
  height: 1071px;
  max-width: 100%;
}

/* Original: @1399 Spalten untereinander (new_columns) */
@media (max-width: 1399px) {
  .ob-columns > div {
    width: 100% !important;
  }
}

/* ============================================================
   FluentForm-Overrides — 1:1 aus universal.css des Originals
   ============================================================ */

/* Original: oxygen.css-Normalize (button/input line-height 1.15) */
.ob-form button,
.ob-form input,
.ob-form optgroup,
.ob-form select,
.ob-form textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

.fluentform_wrapper_3 .fluentform .ff-step-t-container,
.fluentform_wrapper_3 .ff-inner_submit_container {
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

.fluentform_wrapper_3 .ff-step-t-container.ff-inner_submit_container .ff-el-group {
  margin-bottom: 0 !important;
}

.fluentform_wrapper_3 form.ff-form-has-steps .ff-btn-submit {
  line-height: 1 !important;
}

.fluentform_wrapper_3 .step-nav {
  padding: 20px !important;
  padding-top: 0 !important;
}

.ff-message-success {
  background: var(--light-primary) !important;
  text-align: center !important;
  min-height: 100px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: var(--primary-1000) !important;
  border-radius: 25px !important;
}

.fluentform ::placeholder {
  color: var(--light-primary);
  font-size: 16px;
}

/* Online-Bewerbungsformular */
.ff-el-input--content {
  position: relative;
}

span.ff-el-rating-text {
  bottom: -30px;
  position: absolute;
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style),
.ff-default .ff_btn_style {
  background: var(--primary-1000) !important;
  color: var(--light-primary) !important;
  border-radius: var(--border-radius-global) !important;
  font-family: "CocogooseProNarrow Semilight", sans-serif !important;
  font-style: normal !important;
  font-size: 18px !important;
  padding: 15px 25px !important;
  box-shadow: var(--dropshadow-001);
}

.ff-default .ff_btn_style:hover {
  opacity: 1 !important;
  background: var(--secondary-1000) !important;
}

.ff-default .ff-el-form-control {
  height: 50px !important;
}

.ff-default .ff-el-form-check label.ff-el-form-check-label,
.ff-default .ff-el-form-control p {
  font-weight: 300 !important;
}

.ff-default textarea.ff-el-form-control {
  min-height: 200px !important;
}

.fluentform .ff_upload_btn.ff-btn {
  background: var(--primary-1000) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border-radius: 15px !important;
  line-height: 1 !important;
  padding: 15px 25px !important;
}

.fluentform .ff_upload_btn.ff-btn:hover {
  background: var(--secondary-1000) !important;
}

.fluentform .ff-el-ratings {
  display: flex !important;
}

.fluentform .ff-el-ratings input[type=radio] {
  display: none !important;
}

.fluentform .ff-el-ratings svg {
  width: 30px !important;
  height: 30px !important;
}

.fluentform .ff-el-progress-bar {
  background-color: #223a4f !important;
}

.form-step-head h3.ff-el-section-title {
  font-weight: 400 !important;
  font-size: 30px !important;
  margin-top: 30px !important;
  margin-bottom: -10px !important;
  line-height: 1.2; /* Original: Oxygen-Heading-Default (36px) */
  color: #111; /* Original: WP-Preset --wp--preset--color--contrast */
}

.form-step-head p {
  font-weight: 300 !important;
}

.fluentform .ff-el-group {
  margin-bottom: 30px !important;
}

.fluentform .ff-el-group.no_margin_bottom {
  margin-bottom: 0 !important;
  font-weight: 300 !important;
  margin-top: -20px !important;
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style) {
  background: var(--primary-1000) !important;
  padding: 15px 25px !important;
  color: white !important;
  border: none !important;
  border-radius: 15px !important;
  cursor: pointer;
  transition: 0.15s;
}

.ff-default .ff-el-input--label label {
  font-weight: 400 !important;
  letter-spacing: 0.8px !important;
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style):hover {
  background: var(--secondary-1000) !important;
}

.form-flex-row .ff-el-input--content {
  display: flex !important;
  flex-direction: row !important;
}

.form-flex-row .ff-el-form-check label {
  min-width: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ff-el-form-check-label {
  display: flex !important;
  gap: 0 !important;
}

.ff-el-form-check-label span,
.form-flex-row .ff-el-form-check span {
  color: var(--light-primary) !important;
}

.ff-default .ff-el-input--label label {
  color: var(--light-primary) !important;
}

.form-flex-row .ff-el-input--label label {
  margin-bottom: 15px !important;
}

.ff_t_c {
  color: var(--light-primary) !important;
}

.ff-default .ff-el-form-check:last-child label.ff-el-form-check-label {
  gap: 0 !important;
}

.fluentform input[type=radio] {
  margin-right: 10px !important;
}

.fluentform .ff-el-tc.ff-el-form-check:last-child label.ff-el-form-check-label {
  gap: 10px !important;
}

.ff-default .checkbox-row .ff-el-form-check label.ff-el-form-check-label {
  gap: 10px !important;
}

.fluentform .checkbox-row .ff-el-form-check-label .ff-el-form-check-input {
  top: 4px !important;
}

/* FORM CHECKBOX */
.ff-default textarea.ff-el-form-control {
  padding: 15px !important;
  line-height: 1.5 !important;
}

.ff-default .ff-el-form-check:last-child label.ff-el-form-check-label {
  display: flex;
  gap: 10px;
}

.ff-default .ff-el-form-control {
  font-family: "CocogooseProNarrow", sans-serif !important;
  font-size: 16px !important;
}

/* Custom-Checkboxen/-Radios — 1:1 aus universal.css des Originals */
.form-control {
  font-size: 2rem !important;
  font-weight: bold !important;
  line-height: 1.1 !important;
  display: grid !important;
  grid-template-columns: 1em auto !important;
  gap: 0.5em !important;
  font-family: "CocogooseProNarrow", sans-serif !important;
}

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: var(--primary-1000) !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid white !important;
  border-radius: 0.15em !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

.form-control + .form-control {
  margin-top: 1em !important;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.85em !important;
  height: 0.85em !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em var(--primary-1000) !important;
  transform-origin: bottom left !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

input[type="checkbox"]:checked::before {
  transform: scale(1) !important;
}

/* FORM RADIOS */
input[type="radio"] {
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: var(--primary-1000) !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid var(--primary-1000) !important;
  border-radius: 50% !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

input[type="radio"]::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em var(--primary-1000) !important;
}

input[type="radio"]:checked::before {
  transform: scale(1) !important;
}