/* ============================================================
   Kontakt (Page-ID 71) — 1:1-Nachbau von Oxygen
   section-196-71 (Kontaktkarte + FluentForm 4) und
   section-261-71 (Google Map + Anfahrts-Button).
   Werte aus 71.css + universal.css (Original).
   ============================================================ */

/* Original div_block-145-71: schneidet Blob-/Blur-Ueberstand ab */
.kontakt-wrap {
  overflow: hidden;
  width: 100%;
}

/* ------------------------------------------------------------
   1) Hero-Sektion (section-196-71)
   ------------------------------------------------------------ */
.kontakt-hero {
  display: block;
  position: relative;
  text-align: right;
}

.kontakt-hero .section-inner {
  width: 100%;
  margin: 0 auto;
  padding: 150px 50px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* new_columns-197-71 */
.kontakt-columns {
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
  z-index: 5;
  margin-top: 70px;
}

/* div_block-91-71 (+ Oxygen-Default-Padding 20px der Spalten) */
.kontakt-col-info {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 101px 20px 20px 0;
  color: #fdfeff;
  align-items: center;
  text-align: left;
}

/* div_block-219-71 (.border-radius-global .drop_shadow) */
.kontakt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 35px;
  background-color: #fdfeff;
  width: 100%;
  max-width: 400px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

/* headline-216-71 (Oxygen reset: keine Default-Margin oben) */
.kontakt-headline {
  color: #223a4f;
  margin-top: 0;
}

/* div_block-131-71 */
.kontakt-contact {
  margin-bottom: 40px;
  width: 100%;
}

/* text_block-129-71 */
.kontakt-address {
  font-weight: 300;
  color: #223a4f;
  margin-bottom: 30px;
}

/* div_block-233-71 / link-237-71 */
.kontakt-contact-link {
  text-align: left;
  flex-direction: row;
  display: flex;
  width: fit-content;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.kontakt-contact-link:hover {
  text-decoration: underline;
}

/* image-231-71 / image-238-71 */
.kontakt-contact-link img {
  width: 20px;
  margin-bottom: 3px;
}

/* text_block-134-71 / text_block-239-71 */
.kontakt-contact-link div {
  color: #32b4a2;
}

/* div_block-243-71 / text_block-225-71 */
.kontakt-fax {
  text-align: left;
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kontakt-fax div {
  font-weight: 300;
  color: #223a4f;
}

/* div_block-141-71 / div_block-142-71 */
.kontakt-hours {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.kontakt-hours-block {
  width: 100%;
}

/* text_block-143-71 */
.kontakt-hours-title {
  color: #223a4f;
  font-size: 22px;
  margin-bottom: 11px;
}

/* div_block-253/255/258-71 */
.kontakt-hours-row {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

/* text_block-144/248/256/257/259/260-71 */
.kontakt-hours-row div {
  font-weight: 300;
  color: #223a4f;
}

/* div_block-200-71 (padding-left @1920 -> 0, Oxygen-Default 20px o/u) */
.kontakt-col-form {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 20px 0;
  align-items: flex-start;
  text-align: left;
}

/* div_block-195-71 */
.kontakt-form-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 71px 50px 50px 0;
}

/* -form_widget-124-71 */
.kontakt-form {
  width: 100%;
}

/* ------------------------------------------------------------
   2) Blob (div_block-207-71 .has-blured-background + image-208-71)
   ------------------------------------------------------------ */
.kontakt-blob {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

/* universal.css .has-blured-background:after */
.kontakt-blob: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%);
}

.kontakt-blob img {
  position: relative;
  z-index: 5;
  width: 538px;
  height: 1071px;
  max-width: 100%;
  pointer-events: none;
}

/* ------------------------------------------------------------
   3) FluentForm-Styling (universal.css Original-Overrides,
      auf .kontakt-form gescoped; Plugin-CSS liefert die Basis)
   ------------------------------------------------------------ */
.kontakt-form .fluentform ::placeholder {
  color: var(--light-primary);
  font-size: 16px;
}

.kontakt-form .ff-el-input--content {
  position: relative;
}

.kontakt-form .ff-default .ff-btn-secondary:not(.ff_btn_no_style),
.kontakt-form .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);
}

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

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

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

.kontakt-form .ff-default textarea.ff-el-form-control {
  min-height: 200px !important;
  padding: 15px !important;
  line-height: 1.5 !important;
}

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

.kontakt-form .ff-default .ff-el-input--label label {
  font-weight: 400 !important;
  letter-spacing: .8px !important;
  color: var(--light-primary) !important;
}

.kontakt-form .ds-form-link {
  color: var(--light-primary);
  text-decoration: underline;
  transition: .15s;
}

.kontakt-form .ds-form-link:hover {
  color: var(--secondary-1000);
  text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

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

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

/* 71.css: #-form_widget-124-71 — keine :after-Haken der Inputs */
.kontakt-form .ff-el-group input[type=checkbox]:after,
.kontakt-form .ff-el-group input[type=radio]:after {
  content: none;
}

/* universal.css: Custom-Checkboxen */
.kontakt-form 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;
}

.kontakt-form 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;
}

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

/* universal.css: Custom-Radios */
.kontakt-form 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;
}

.kontakt-form 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;
}

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

/* universal.css: Erfolgsmeldung nach Absenden */
.kontakt-form .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;
}

/* ------------------------------------------------------------
   4) Karten-Sektion (section-261-71)
   ------------------------------------------------------------ */
.kontakt-map .section-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 50px;
}

/* div_block-263-71 */
.kontakt-map-wrap {
  width: 100%;
  position: relative;
}

/* shortcode-262-71 (.border-radius-global .drop_shadow) */
.kontakt-map-frame {
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

/* link_button-264-71 (ct-link-button + .btn-xl-secondary + drop_shadow) */
.kontakt-route {
  display: block;
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 10px 16px;
  color: #fff;
  text-align: center;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
  transition-duration: .15s;
}

.kontakt-route:hover {
  background-color: #32b4a2;
  border-color: #32b4a2;
  color: #fff;
}

/* ------------------------------------------------------------
   5) Media Queries (Original-Breakpoints 1399 / 767 / 479)
   ------------------------------------------------------------ */
@media (max-width: 1399px) {
  .kontakt-col-form {
    padding-top: 43px;
    text-align: left;
    align-items: center;
  }

  .kontakt-form-wrap {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .kontakt-hero .section-inner {
    padding: 15px 20px 57px;
  }

  .kontakt-columns {
    flex-direction: column;
    z-index: 15;
  }

  .kontakt-columns > div {
    width: 100% !important;
  }

  .kontakt-col-info {
    padding-right: 0;
  }

  .kontakt-card {
    width: 100%;
    max-width: 100%;
  }

  .kontakt-headline {
    font-size: 31px;
  }

  .kontakt-hours-row div {
    font-size: 16px;
  }

  .kontakt-col-form {
    align-items: center;
    text-align: center;
  }

  .kontakt-form-wrap {
    padding-top: 9px;
    align-items: flex-start;
    text-align: left;
  }

  .kontakt-blob img {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kontakt-map .section-inner {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 479px) {
  .kontakt-hero .section-inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  .kontakt-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kontakt-contact {
    margin-bottom: 27px;
  }

  .kontakt-contact-link div,
  .kontakt-fax div {
    font-size: 15px;
  }

  .kontakt-blob img {
    margin-bottom: 1px;
  }
}