/* ============================================================
   SEITE: BEWERTUNG (/bewertung/, Page-ID 380) — Prefix bw-
   Werte 1:1 aus Original-CSS (317er-IDs in 380.css) +
   FluentForms-Styling aus Original-universal.css (unter .bw-form
   bzw. .bw-section gescopet). Breakpoints: 1920 / 1399 / 767 / 479.
   ============================================================ */

/* div_block-34-380 */
.bw-wrap {
  overflow: hidden;
}

/* section-4-317 */
.bw-section {
  display: block;
  text-align: right;
  position: relative;
}

.bw-section .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 203px 50px 504px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* new_columns-5-317 */
.bw-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 5;
}

/* div_block-6-317 (+ Oxygen-Default: Spalten-Kinder padding 20px) */
.bw-col-images {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 20px 20px 20px 0;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
}

/* div_block-7-317 */
.bw-collage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bw-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

/* div_block-8-317 */
.bw-img-1 {
  width: 100%;
}

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

/* div_block-10-317 */
.bw-img-2 {
  width: 100%;
  text-align: right;
  align-items: flex-start;
  margin-top: -341px;
}

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

/* div_block-12-317 */
.bw-img-3 {
  width: 100%;
  text-align: center;
  align-items: flex-start;
  margin-top: -143px;
}

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

/* div_block-14-317 (+ Oxygen-Default: Spalten-Kinder padding 20px) */
.bw-col-form {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 33px 0 20px 136px;
  align-items: flex-start;
  text-align: left;
  z-index: 2;
  position: relative;
}

/* text_block-26-380 */
.bw-headline {
  font-size: 37px;
  color: #32b4a2;
  margin-bottom: 30px;
}

.bw-headline span {
  color: #32b4a2;
  display: inline-block;
}

/* span-30-380 */
.bw-headline .bw-headline-white {
  color: #ffffff;
}

/* shortcode-3-317 */
.bw-form {
  width: 100%;
  max-width: 1000px;
  color: #fdfeff;
}

/* div_block-24-317 (has-blured-background) */
.bw-blob {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

/* Original .has-blured-background:after (fehlt in base.css) */
.bw-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%);
}

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

/* universal.css: Zwischen-Breakpoint fürs mittlere Collage-Bild */
@media only screen and (min-width: 1401px) and (max-width: 1600px) {
  .bw-img-2 img {
    margin-left: 250px !important;
  }
}

@media (max-width: 1920px) {
  .bw-collage {
    width: 100%;
    max-width: 100%;
  }

  .bw-img-2 {
    max-width: 100%;
  }
}

@media (max-width: 1399px) {
  .bw-columns > .bw-col-images,
  .bw-columns > .bw-col-form {
    width: 100% !important;
  }

  .bw-collage {
    max-width: 700px;
  }

  .bw-img-2 {
    align-items: flex-end;
    text-align: left;
  }

  .bw-img-1 img {
    width: 500px;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }

  .bw-img-2 img {
    width: 350px;
    margin-top: 75px;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }

  .bw-img-3 img {
    width: 450px;
    height: auto;
  }

  .bw-col-form {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .bw-section .section-inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  .bw-col-images {
    padding-top: 0;
    padding-right: 0;
  }

  .bw-img-2 {
    margin-top: 0;
  }

  .bw-img-1 img {
    width: 90%;
    height: auto;
  }

  .bw-img-2 img {
    width: 80%;
    margin-top: -156px;
    height: 220px;
  }

  /* Original: nur das IMG wird versteckt — der Container behält
     seinen margin-top:-143px und verkürzt so die Collage-Spalte */
  .bw-img-3 img {
    display: none;
  }

  .bw-col-form {
    margin-top: 125px;
  }

  .bw-headline {
    line-height: 1.2;
  }
}

@media (max-width: 479px) {
  .bw-headline {
    font-size: 31px;
  }
}

/* ------------------------------------------------------------
   FluentForms-Styling (Original: universal.css, hier gescopet)
   ------------------------------------------------------------ */
.bw-form .fluentform ::placeholder {
  color: var(--light-primary);
  font-size: 16px;
}

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

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

/* universal.css: .feedback-row (Custom-Klasse am Feedback-Feld) */
.bw-form .feedback-row {
  margin-top: 50px;
}

.bw-form .ff-default .ff-btn-secondary:not(.ff_btn_no_style),
.bw-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);
  cursor: pointer;
  transition: .15s;
}

.bw-form .ff-default .ff_btn_style:hover,
.bw-form .ff-default .ff-btn-secondary:not(.ff_btn_no_style):hover {
  opacity: 1 !important;
  background: var(--secondary-1000) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* universal.css: globales Checkbox-Styling (Custom-Optik) */
.bw-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;
}

.bw-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;
}

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

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

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