/* ============================================================
   STELLENANZEIGE (CPT "jobs") — Prefix job-
   1:1-Nachbau des Oxygen-Templates 314 ("Job") inkl. der
   eingebetteten Benefits-Section (Template 80 / 499).
   Werte 1:1 aus Oxygen 314.css + 499.css + 80.css + universal.css
   (Element-IDs: section-2-314, div_block-3-314 ff.,
   section-10960-80, bewerbung-cta).
   Breakpoints wie Original: 1920 / 1399 / 780h / 767 / 600 / 480 / 479 px
   ============================================================ */

/* ---------- Hero-Section (Original: #section-2-314) ---------- */

.job-hero .section-inner {
  max-width: 100%;
  padding: 0;
}

/* Intro (Original: #div_block-3-314 .intro-section) */
.job-intro {
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

/* Spalten (Original: #new_columns-4-314, Oxygen new-columns) */
.job-intro-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding-top: 81px;
}

/* Linke Spalte (Original: #div_block-5-314) */
.job-intro-col-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 282px 20px 20px 20px;
  justify-content: flex-start;
  text-align: left;
  align-items: flex-end;
}

/* Inhalt (Original: #div_block-6-314) */
.job-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  position: relative;
  z-index: 10;
}

/* Label-Zeile (Original: #div_block-99-314) */
.job-labels {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
}

/* Label-Pille (Original: universal.css .job-detail-label) */
.job-label {
  padding: 8px 14px 6px 14px;
  border: 1px solid #fdfeff;
  border-radius: 25px;
  font-size: 12px;
  line-height: 1;
  background-color: rgba(187, 187, 187, 0);
  color: #fdfeff;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 1px;
}

.job-label span {
  display: inline-block; /* Original: .ct-span sitewide */
}

/* H1 (Original: #headline-7-314 .headline-5xl .intro-headline) */
/* H1-Hülle um Titel + Untertitel: selbst unsichtbar, Kinder tragen die Optik */
.job-intro-h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.job-intro-headline {
  display: block;
  font-size: 90px;
  color: #fdfeff;
  margin: 0 -350px 12px 0;
  overflow-wrap: break-word;
}

.job-intro-headline span {
  display: inline-block; /* Original: .ct-span */
}
/* Original: universal.css setzt #span-39-314 mobil eine harte max-width,
   damit die H1 kontrolliert umbricht (siehe Breakpoints unten). */

/* Untertitel (Original: #text_block-10-314) */
.job-intro-text {
  display: block;
  font-size: 26px;
  color: #fdfeff;
  margin-bottom: 14px;
}

.job-intro-text span {
  display: inline-block; /* Original: .ct-span */
}

/* Button-Zeile (Original: #div_block-11-314 .intro-btn) */
.job-intro-btns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
}

/* Original: #link_button-12-314 / -13-314 { text-transform:none } */
.job-intro-btns .btn-xl-primary.btn-outline-green {
  color: var(--light-primary); /* Original: #fdfeff bei grün umrandeten Buttons */
}

.job-intro-btns .btn-xl-primary {
  text-transform: none;
  color: #ffffff;
  text-align: center;
}

/* Pfeil-Icon im Button (Original: universal.css .btn-el-right:before) */
.job-intro-btns .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);
}

.job-intro-btns .btn-el-right:hover:before {
  right: 15px;
}

/* Rechte Spalte (Original: #div_block-14-314) */
.job-intro-col-visual {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 20px;
  text-align: left;
  align-items: center;
}

/* Visual (Original: #div_block-15-314) */
.job-intro-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  margin-left: -150px;
}

/* Blob (Original: #code_block-16-314) */
img.job-intro-blob[data-aos][data-aos][data-aos],
.job-intro-blob {
  width: 100%;
  max-width: 800px;
  opacity: 0.7;
}

.job-intro-blob svg {
  width: 100%;
}

/* Blob-Ringe pulsieren wie im Original
   (universal.css: #state-1..3, fadeInOut 0 -> .3 -> 0) */
.job-intro-blob .job-blob-state {
  opacity: 0;
  transition: opacity 0.1s;
}

@keyframes job-fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

.job-intro-blob .job-blob-state-1 { animation: job-fade-in-out 3s 0.5s infinite; }
.job-intro-blob .job-blob-state-2 { animation: job-fade-in-out 3s 1s infinite; }
.job-intro-blob .job-blob-state-3 { animation: job-fade-in-out 3s 1.5s infinite; }

/* Beitragsbild (Original: #image-17-314 .intro-image, Endzustand ".show") */
.job-intro-image {
  position: absolute;
  max-width: 755px;
  height: auto; /* width/height-Attribute am <img> duerfen die Skalierung nicht fixieren */
  top: 49.5%;
  left: 20px;
  transform: translateY(-50%);
}

/* Scroll-Link (Original: #div_block-10738-12 .arrow-down-link) */
.job-scroll-link {
  position: absolute;
  left: 50px;
  bottom: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.8;
  z-index: 15;
  text-align: left;
}

.job-scroll-icon {
  display: block;
  width: 40px;
  height: 40px;
  z-index: 1;
}

.job-scroll-text {
  font-style: italic;
  color: #fdfeff;
}

/* Original: universal.css @media (max-height:780px) */
@media only screen and (max-height: 780px) {
  .job-scroll-link {
    display: none !important;
  }
}

/* ---------- Hauptteil (Original: #mehr .first-section) ---------- */

.job-main {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 142px 50px 20px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  z-index: 12; /* Original: ueber dem has-blured-end-Verlauf */
}

/* Stellenbeschreibung (Original: #text_block-49-314) */
.job-desc {
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  margin-bottom: 43px;
}

.job-desc span {
  display: inline-block; /* Original: .ct-span */
}

/* Video (Original: #code_block-113-314, nur bei Beschaeftigungsgrad "Ausbildung") */
.job-video {
  width: 100%;
  max-width: 961px;
  margin-bottom: 20px;
  cursor: pointer;
}

.job-video video {
  width: 100%;
}

/* Spalten Aufgaben/Profil (Original: #new_columns-20-314) */
.job-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-top: 40px;
  padding-bottom: 26px;
  border-top: 1px solid #bec7cf;
  border-bottom: 1px solid #bec7cf;
  text-align: left;
  z-index: 5;
}

/* Spalte (Original: #div_block-44-314 / #div_block-45-314) */
.job-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  padding: 20px;
  text-align: left;
}

/* Original: #div_block-44-314 { padding-left:0; padding-right:72px } */
.job-col--tasks {
  padding-left: 0;
  padding-right: 72px;
}

/* Ueberschriften (Original: #headline-46-314 / #headline-59-314) */
.job-col-heading {
  color: #fdfeff;
  letter-spacing: 1px;
  margin: 0 0 35px 0;
}

/* Original: #headline-46-314 { font-size:30px } */
.job-col-heading--tasks {
  font-size: 30px;
}

/* ---------- Unser Angebot (Original: #section-58-314) ---------- */

.job-offer {
  position: relative;
  z-index: 3;
}

.job-offer .section-inner {
  padding-top: 0;
  padding-left: 50px;
  padding-right: 50px;
}

/* Original: #headline-65-314 */
.job-offer-heading {
  color: #fdfeff;
  letter-spacing: 1px;
  margin: 0 0 35px 0;
}

/* ---------- Listen (Original: universal.css .bm-own-list) ---------- */

.job-list {
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

.job-list ul {
  padding: 0;
  padding-left: 20px;
  margin: 0;
}

.job-list ul li {
  list-style-type: none;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 22px;
}

.job-list ul li:before {
  position: absolute;
  width: 20px;
  height: 8px;
  background: var(--primary-1000);
  border-radius: var(--border-radius-minimal);
  left: -20px;
  top: 10px;
  content: "";
}

/* Original: #text_block-62-314 { margin-bottom:32px } */
.job-list--profile {
  margin-bottom: 32px;
}

/* ---------- Benefits (Original: #section-10960-80 / Template 499) ---------- */

.job-benefits {
  z-index: 2;
  position: relative;
}

.job-benefits .section-inner {
  padding-top: 164px;
  padding-bottom: 162px;
  gap: 40px;
}

/* Kopf (Original: #div_block-11031-80; margin-top 80 = 2 leere
   Code-Blocks x gap 40 im Original) */
.job-benefits-head {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 7px;
}

/* Headline (Original: #headline-11033-80, Span #223a4f) */
.job-benefits-headline {
  color: #fdfeff;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.job-benefits-headline span {
  color: #223a4f;
  display: inline-block; /* Original: .ct-span */
}

/* Grids (Original: #div_block-10961-80 / #div_block-10984-80) */
.job-benefits-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 20px;
  width: 100%;
  text-align: left;
}

/* Benefit-Karte (Original: .benefit-wrap, universal.css) */
.job-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 25px;
  height: 100%;
  border: 1px solid #fdfeff;
  border-radius: 25px;
}

/* Original: 499.css #div_block-44-499 { display:none } */
.job-benefit--schulungen {
  display: none;
}

/* Azubi-Variante (Original: code_block-43-499 / code_block-48-499 schalten
   per PHP-Condition auf das ACF-Feld "azubi" um):
   "Jobbike" und das komplette zweite Grid aus, "Kostenuebernahme" an. */
.job-benefits--azubi .job-benefit--jobbike,
.job-benefits--azubi .job-benefits-grid--bottom .job-benefit {
  display: none;
}

.job-benefits--azubi .job-benefit--schulungen {
  display: flex;
}

/* Icon (Original: .benefit-icon / .benefit-icon-big) */
.job-benefit-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.job-benefit-icon--big {
  width: 90px;
}

/* Icon-Farbe (Original: universal.css .benefit-wrap svg) */
.job-benefit svg {
  fill: var(--primary-1000) !important;
}

/* Label (Original: .benefit-label) */
.job-benefit-label {
  color: #fdfeff;
  letter-spacing: 1px;
  font-weight: 300;
  text-align: center;
}

/* ---------- Bewerbungs-CTA (Original: #bewerbung-cta) ---------- */

.job-cta .section-inner {
  padding-left: 50px;
  padding-right: 50px;
}

/* Box (Original: #div_block-71-314) */
.job-cta-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 6;
  border-radius: 15px;
  background-color: #223a4f;
  text-align: left;
}

/* Textspalte (Original: #div_block-72-314) */
.job-cta-col {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
  padding-left: 100px;
  text-align: left;
}

/* Inhalt (Original: #div_block-73-314 .white-text) */
.job-cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 750px;
  text-align: left;
}

/* Headline (Original: #headline-74-314 .headline-xl)
   Farbe: Oxygen setzt hier KEINE Farbe, deshalb greift im Original die
   Global-Styles-Regel des Block-Themes (h1-h6 { color: #111111 }) und die
   Headline bleibt dunkel — trotz .white-text am Elternelement.
   Das ist Original-Design (Kontrast-Schwaeche) und wird bewusst 1:1
   uebernommen, nicht "korrigiert". */
.job-cta-headline {
  margin: 0 0 6px 0;
  color: #111111;
}

.job-cta-headline span {
  color: #32b4a2;
  display: inline-block; /* Original: .ct-span */
}

/* Hinweistext (Original: #text_block-103-314, nur bei Azubi = Ja) */
.job-cta-text {
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

/* Button-Zeile (Original: #div_block-79-314) */
.job-cta-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  text-align: left;
}

/* Original: #link_button-80-314 / -107-314 */
.job-cta-btns .btn-xl-primary {
  margin-top: 0;
  text-transform: none;
  font-size: 16px;
  color: #ffffff; /* Original: reines Weiß */
  text-align: center;
}

/* Bildspalte (Original: #div_block-83-314) */
.job-cta-visual {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: flex-end;
  text-align: left;
}

/* Bild (Original: #image-84-314) */
.job-cta-image {
  height: 500px;
  width: 100%;
  object-fit: cover;
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media (max-width: 1920px) {
  /* Original: @media (max-width:1920px) #div_block-5-314 */
  .job-intro-col-content {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 1399px) {
  /* Original: #div_block-15-314 { margin-left:0; max-width:100% } */
  .job-intro-visual {
    margin-left: 0;
    max-width: 100%;
  }

  /* Original: #image-17-314 { left:0; right:0; max-width:100% } */
  .job-intro-image {
    left: 0;
    right: 0;
    max-width: 100%;
  }

  /* Original: #mehr { padding-top:62px } */
  .job-main {
    padding-top: 62px;
  }

  /* Original: #new_columns-20-314 > .ct-div-block { width:100% !important } */
  .job-col {
    width: 100%;
  }

  /* Original: #div_block-72-314 { padding-left:39px } */
  .job-cta-col {
    padding-left: 39px;
  }
}

@media (max-width: 767px) {
  /* Original: #new_columns-4-314 { flex-direction:column-reverse }
     + #new_columns-4-314 > .ct-div-block { width:100% !important } */
  .job-intro-columns {
    flex-direction: column-reverse;
  }

  .job-intro-col-content,
  .job-intro-col-visual {
    width: 100% !important;
  }

  /* Original: #div_block-5-314 */
  .job-intro-col-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
    text-align: right;
    align-items: center;
  }

  /* Original: #div_block-6-314 */
  .job-intro-content {
    margin-top: -100px;
    align-items: center;
  }

  /* Original: #div_block-99-314 { flex-wrap:wrap } */
  .job-labels {
    flex-wrap: wrap;
  }

  /* Original: #headline-7-314 */
  .job-intro-headline {
    margin-right: 0;
    margin-left: 0;
    font-size: 75px;
    text-align: center;
  }

  /* Original: #text_block-10-314 */
  .job-intro-text {
    font-size: 20px;
    text-align: center;
  }

  /* Original: #div_block-11-314 { flex-direction:column; gap:0 } */
  .job-intro-btns {
    flex-direction: column;
    gap: 0;
  }

  /* Original: #div_block-15-314 { max-width:70% } */
  .job-intro-visual {
    max-width: 70%;
  }

  /* Original: 295.css #div_block-10738-12 { right:50px; left:auto },
     danach universal.css { right:20px; gap:0 } */
  .job-scroll-link {
    left: auto;
    right: 20px;
    gap: 0;
  }

  /* Original: universal.css #div_block-10738-12 svg */
  .job-scroll-link svg {
    width: 30px;
    margin-top: 4px;
  }

  .job-scroll-text {
    font-size: 15px;
  }

  /* Original: #mehr */
  .job-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Original: #div_block-44-314 / #div_block-45-314 */
  .job-col--tasks {
    padding-right: 0;
  }

  .job-col--profile {
    padding-left: 0;
    padding-right: 0;
  }

  /* Original: #text_block-55-314 { font-size:20px } */
  .job-list--tasks {
    font-size: 20px;
  }

  /* Original: #headline-59-314 / #headline-65-314 { font-size:30px } */
  .job-col-heading--profile,
  .job-offer-heading {
    font-size: 30px;
  }

  /* Original: #section-58-314 / #bewerbung-cta Innenabstaende */
  .job-offer .section-inner,
  .job-cta .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Original: #div_block-72-314 */
  .job-cta-col {
    width: 100%;
    padding-top: 42px;
    padding-bottom: 26px;
  }

  /* Original: #headline-74-314 { font-size:36px } */
  .job-cta-headline {
    font-size: 36px;
  }

  /* Original: #image-84-314 */
  img.job-cta-image[data-aos][data-aos][data-aos],
.job-cta-image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin-right: -120px;
    opacity: 0.7;
  }

  /* Benefits (Original: #section-10960-80 / #div_block-10961-80) */
  .job-benefits .section-inner {
    padding-bottom: 94px;
  }

  .job-benefits-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

/* Original: universal.css #span-39-314 { max-width:600px !important } */
@media only screen and (max-width: 768px) {
  .job-intro-headline span {
    max-width: 600px;
  }
}

/* Original: universal.css .bm-own-list ul li */
@media only screen and (max-width: 600px) {
  .job-list ul li {
    font-size: 20px;
  }

  /* Original: universal.css .intro-headline { font-size:44px !important } */
  .job-intro-headline {
    font-size: 44px !important;
  }
}

@media only screen and (max-width: 480px) {
  .job-intro-headline {
    font-size: 35px !important;
  }

  /* Original: universal.css #span-39-314 { max-width:300px !important } */
  .job-intro-headline span {
    max-width: 300px;
  }
}

@media (max-width: 479px) {
  /* Original: universal.css .intro-section { min-height:1px } */
  .job-intro {
    min-height: 1px;
  }

  /* Original: universal.css .arrow-down-link { margin-bottom:15px } */
  .job-scroll-link {
    margin-bottom: 15px;
  }

  /* Original: #headline-46-314 / #headline-59-314 / #headline-65-314 */
  .job-col-heading,
  .job-offer-heading {
    font-size: 26px;
  }

  /* Original: #bewerbung-cta > .ct-section-inner-wrap { padding-bottom:29px } */
  .job-cta .section-inner {
    padding-bottom: 29px;
  }

  /* Original: #div_block-72-314 */
  .job-cta-col {
    position: relative;
    z-index: 5;
    min-width: 100%;
    padding-left: 23px;
  }

  /* Original: #image-84-314 { margin-right:0; opacity:.5 } */
  img.job-cta-image[data-aos][data-aos][data-aos],
.job-cta-image {
    margin-right: 0;
    opacity: 0.5;
  }

  /* Benefits (Original: 499.css @479) */
  .job-benefits .section-inner {
    padding-bottom: 68px;
  }

  .job-benefits-grid {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .job-benefit {
    padding: 15px;
    margin-right: 1px;
  }
}

/* Benefits-Grid bei 1399 (Original: 499.css) — nach den 479er-Regeln
   waere die Reihenfolge falsch, daher hier separat und vor 767/479
   nicht noetig: 1399 greift nur oberhalb von 767. */
@media (max-width: 1399px) and (min-width: 768px) {
  .job-benefits-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

/* Flache Fenster (≤ 900 px hoch): wie Leistungsseiten, siehe leistung-shared.css
   (Headline hier 90 → 72 px, Rand −350 → −240 px: „IT-Systemadministrator" bleibt einzeilig) */
@media (min-width: 768px) and (max-height: 900px) {
  .job-intro-col-content {
    padding-top: 200px;
  }

  .job-intro-headline {
    font-size: 72px;
    margin-right: -240px;
  }
}