/* ============================================================
   Karriere-Sektion (Startseite) — Werte 1:1 aus dem Original
   (321.css, Element-IDs #div_block-34xx-12 / #image-34xx-12)
   ============================================================ */

/* Oxygen arbeitet global mit border-box — base.css setzt das nicht,
   deshalb hier sektionslokal (Konvention: global Fehlendes mit Präfix). */
#karriere,
#karriere * {
  box-sizing: border-box;
}

#karriere {
  display: block;
  height: 100vh;
  text-align: right;
  position: relative;
}

#karriere > .section-inner {
  height: 100%;
  padding-right: 50px;
  padding-left: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* --- Spalten (Original: #new_columns-3482-12) --- */

.karriere-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  z-index: 5;
}

.karriere-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}

/* linke Spalte: Bildergalerie (#div_block-3483-12) */
.karriere-col-gallery {
  width: 50%;
  padding-left: 0;
  text-align: left;
  align-items: center;
  justify-content: center;
}

/* rechte Spalte: Text (#div_block-3484-12) */
.karriere-col-text {
  width: 50%;
  padding-left: 136px;
  padding-right: 0;
  justify-content: center;
}

/* --- Bild-Kollage --- */

/* #div_block-3492-12 */
.karriere-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

/* #div_block-3491-12 */
.karriere-photo-1 {
  text-align: left;
}

/* #div_block-3489-12 */
.karriere-photo-2 {
  text-align: right;
  margin-top: -341px;
}

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

.karriere-photo img {
  border-radius: 15px;
  object-fit: cover;
}

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

/* #image-3486-12 */
.karriere-img-1 {
  max-width: 700px;
  aspect-ratio: 740 / 510;
  width: 696px;
  height: 480px;
}

/* #image-3487-12 */
.karriere-img-2 {
  max-width: 520px;
  aspect-ratio: 520 / 420;
  margin-left: 378px;
  width: 520px;
  height: 420px;
}

/* #image-3488-12 */
.karriere-img-3 {
  max-width: 590px;
  aspect-ratio: 590 / 405;
  margin-left: 112px;
  width: 590px;
  height: 405px;
}

/* --- Textblock (#div_block-3495-12) --- */

.karriere-text {
  display: flex;
  flex-direction: column;
  max-width: 550px;
  align-items: flex-start;
  text-align: left;
}

/* #headline-24-321 (margin-top: 0 = Oxygen-Reset, fehlt in base.css) */
.karriere-headline {
  margin-top: 0;
  margin-bottom: 16px;
}

/* #span-28-321 */
.karriere-headline-highlight {
  color: #32b4a2;
}

/* #text_block-3498-12 */
.karriere-copy {
  font-weight: 300;
  margin-bottom: 25px;
}

/* #div_block-3559-12 */
.karriere-cta {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  text-align: left;
}

/* #link_button-3557-12 */
.karriere-btn {
  display: inline-block;
  text-align: center;
  margin-top: 0;
  text-transform: none;
  font-size: 16px;
}

/* Pfeil-Icon im Button (.btn-el-right:before aus universal.css — fehlt in base.css) */
.karriere-btn.btn-el-right:before {
  content: "";
  background: var(--btn-arrow-image);
  background-size: contain;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  position: absolute;
  transition: var(--global-transition);
}

/* --- Blob + Blur-Hintergrund (#div_block-3481-12 / #image-3062-12) --- */

.karriere-blob {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

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

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

/* ============================================================
   Media Queries (Breakpoints wie im Original)
   ============================================================ */

@media (max-width: 1399px) {
  #karriere {
    height: auto;
  }

  #karriere > .section-inner {
    height: auto;
  }

  .karriere-columns > .karriere-col {
    width: 100% !important;
  }

  .karriere-col-gallery {
    text-align: left;
    align-items: center;
    padding-right: 0;
  }

  .karriere-gallery {
    width: 100%;
  }

  .karriere-photo-1 {
    padding-left: 0;
    padding-right: 50px;
    text-align: left;
    align-items: center;
  }

  .karriere-photo-2 {
    text-align: left;
    align-items: center;
  }

  .karriere-photo-3 {
    text-align: left;
    align-items: center;
  }

  .karriere-col-text {
    padding-left: 0;
    padding-top: 43px;
    text-align: left;
    align-items: center;
  }

  .karriere-img-1 {
    width: 450px;
    height: 350px;
  }

  .karriere-img-2 {
    width: 400px;
    height: 300px;
    margin-top: 73px;
    margin-left: 200px;
    margin-right: 0;
  }

  .karriere-img-3 {
    width: 420px;
    height: 300px;
    margin-left: 46px;
  }
}

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

  .karriere-photo-2 {
    text-align: left;
    align-items: flex-end;
  }

  .karriere-photo-3 {
    text-align: center;
    align-items: flex-start;
  }

  .karriere-cta {
    flex-direction: column;
    display: flex;
    text-align: center;
    align-items: flex-start;
  }

  .karriere-headline {
    font-size: 30px;
  }

  .karriere-img-1 {
    width: 100%;
    height: 250px;
  }

  .karriere-img-2 {
    width: 75%;
    margin-top: 200px;
    height: 250px;
    margin-left: 0;
    margin-right: 0;
  }

  .karriere-img-3 {
    width: 70%;
    height: 200px;
    margin-left: 31px;
  }
}

@media (max-width: 479px) {
  .karriere-headline {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .karriere-img-1 {
    height: 200px;
  }

  .karriere-img-2 {
    height: 200px;
  }

  .karriere-img-3 {
    height: 160px;
    margin-top: 24px;
  }

  .karriere-blob-img {
    height: 1200px;
  }

  /* Blob-Container ist hier 1200px hoch (statt 1071) -> Vertikalprofil des
     Gradient-Ersatzes fuer b = 480px neu berechnet (Box 960 + 2100 = 3060px). */
  .karriere-blob.has-blured-background:after {
    background: linear-gradient(to bottom,
      rgba(0,66,112,0) 0%,
      rgba(0,66,112,0.004) 4.25%,
      rgba(0,66,112,0.009) 7.52%,
      rgba(0,66,112,0.018) 10.78%,
      rgba(0,66,112,0.036) 14.05%,
      rgba(0,66,112,0.064) 17.32%,
      rgba(0,66,112,0.108) 20.59%,
      rgba(0,66,112,0.171) 23.86%,
      rgba(0,66,112,0.253) 27.12%,
      rgba(0,66,112,0.351) 30.39%,
      rgba(0,66,112,0.46) 33.66%,
      rgba(0,66,112,0.57) 36.93%,
      rgba(0,66,112,0.669) 40.2%,
      rgba(0,66,112,0.749) 43.46%,
      rgba(0,66,112,0.8) 46.73%,
      rgba(0,66,112,0.818) 50%,
      rgba(0,66,112,0.8) 53.27%,
      rgba(0,66,112,0.749) 56.54%,
      rgba(0,66,112,0.669) 59.8%,
      rgba(0,66,112,0.57) 63.07%,
      rgba(0,66,112,0.46) 66.34%,
      rgba(0,66,112,0.351) 69.61%,
      rgba(0,66,112,0.253) 72.88%,
      rgba(0,66,112,0.171) 76.14%,
      rgba(0,66,112,0.108) 79.41%,
      rgba(0,66,112,0.064) 82.68%,
      rgba(0,66,112,0.036) 85.95%,
      rgba(0,66,112,0.018) 89.22%,
      rgba(0,66,112,0.009) 92.48%,
      rgba(0,66,112,0.004) 95.75%,
      rgba(0,66,112,0) 100%);
  }
}