/* ============================================================
   Seite: Unternehmen (Page-ID 67)
   Nur Seitenspezifisches — gemeinsame Bausteine in leistung-shared.css
   (Werte aus Original 67.css + universal.css, Element-IDs im Kommentar)
   ============================================================ */

/* Aktive Menü-Pill kommt zentral aus nav.php (.is-current) */

/* #section-550-67: custom CSS "height: calc(100vh + 875px)" steht zwar
   im Oxygen-CSS (base64), ist im Original-Rendering aber NICHT aktiv
   (gemessene Hero-Höhe = auto) → bewusst weggelassen. */

/* #mehr (67): padding 142/50/140/50, mobil 45/20/56/20 */
.un-mehr {
  padding-bottom: 140px;
}

/* #div_block-582-67: Oxygen-Spalten-Padding komplett auf 0 */
.un-mehr .lp-intro-block-text {
  padding: 0;
}

/* #text_block-583-67: max-width 927px */
.un-mehr-headline {
  max-width: 927px;
}

/* #text_block-585-67: max-width 1100px (statt 1300 der --center-Variante) */
.lp-intro-block--center .un-mehr-copy {
  max-width: 1100px;
}

/* ------------------------------------------------------------
   section-13-189: "Leopold Netzwerk GmbH"
   ------------------------------------------------------------ */
.un-about .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 164px 50px 85px;
}

/* #new_columns-623-67 (z-index 3) */
.un-about-columns {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* #div_block-624-67 (Oxygen-Default-Padding 20px oben/unten, l/r auf 0) */
.un-about-text {
  width: 50%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* #headline-627-67 */
.un-about-headline {
  margin: 0 0 19px;
  color: #ffffff;
}

/* #span-630-67 */
.un-about-headline span {
  color: #223a4f;
  display: inline-block;
}

/* #text_block-382-189 */
.un-about-copy {
  font-size: 22px;
  font-weight: 300;
  color: #ffffff;
}

/* #div_block-625-67 (Oxygen-Default-Padding-Top 20px bleibt) */
.un-about-media {
  width: 50%;
  padding: 20px 40px 88px 57px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* #div_block-636-67 */
.un-about-imgwrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* #image-634-67 (+ .drop_shadow) */
.un-about-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

/* #div_block-637-67 (+ .drop_shadow) */
.un-about-logocard {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translate(-50%);
  padding: 10px 20px;
  background-color: #32b4a2;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.un-about-logo {
  max-width: 100%;
}

/* ------------------------------------------------------------
   section-769-67: "Arbeiten bei Leopold" + Galerie
   ------------------------------------------------------------ */
.un-work {
  display: block;
  position: relative;
}

.un-work .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 150px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* #div_block-675-67 */
.un-work-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  position: relative;
  z-index: 3;
  margin-bottom: 51px;
  padding-bottom: 86px;
}

/* #code_block-676-67 (.primary-icon: 150x150; margin-bottom 30 NUR mobil) */
.un-work-icon {
  width: 150px;
  height: 150px;
}

.un-work-icon svg {
  width: 150px;
  height: 150px;
  display: block;
}

/* Original universal.css: .primary-icon .st1 { fill: var(--primary-1000) } */
.un-work-icon .st1 {
  fill: var(--primary-1000);
}

/* #text_block-678-67 */
.un-work-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  max-width: 927px;
  text-align: center;
}

/* #span-683-67 */
.un-work-headline span {
  color: #223a4f;
  display: inline-block;
}

/* #text_block-687-67 */
.un-work-copy {
  font-weight: 300;
  max-width: 1300px;
  text-align: center;
  margin-bottom: 12px;
  font-size: 22px;
}

/* Galerie: #div_block-640-67 / #div_block-691-67 */
.un-gallery-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}

/* #div_block-641-67 / #div_block-692-67 */
.un-gallery-col {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  text-align: left;
}

/* #div_block-648-67 / #div_block-695-67 */
.un-gallery-col--reverse {
  flex-direction: column-reverse;
}

/* Original universal.css .flex-2 / .flex-1 — die 65%/35%-Höhen greifen
   im Original erst, wenn die Spalte eine feste Höhe hat (≤1399px);
   auf Desktop rendern die Bilder im natürlichen Seitenverhältnis. */
.un-flex-2 {
  object-fit: cover;
  object-position: center;
  margin-bottom: 0;
  width: 100%;
}

.un-flex-1 {
  object-fit: cover;
  width: 100%;
}

/* ------------------------------------------------------------
   section-639-67: leere Abstands-Sektion
   ------------------------------------------------------------ */
.un-spacer {
  overflow: hidden;
}

.un-spacer .section-inner {
  width: 100%;
  padding: 165px 50px 156px;
}

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

@media (max-width: 1399px) {
  /* #new_columns-623-67 > .ct-div-block { width: 100% !important } */
  .un-about-columns > .un-about-text,
  .un-about-columns > .un-about-media {
    width: 100% !important;
  }

  /* #div_block-625-67 */
  .un-about-media {
    padding-left: 0;
    padding-right: 0;
  }

  /* #div_block-641-67 etc.: feste Spaltenhöhe */
  .un-gallery-col {
    height: 700px;
  }

  /* universal.css .flex-2/.flex-1: Prozent-Höhen bei fester Spaltenhöhe */
  .un-flex-2 {
    height: 65%;
  }

  .un-flex-1 {
    height: 35%;
  }
}

@media (max-width: 767px) {
  /* #mehr */
  .un-mehr {
    padding-top: 45px;
    padding-bottom: 56px;
  }

  /* #section-13-189 inner */
  .un-about .section-inner {
    padding: 64px 20px 0;
  }

  /* #new_columns-623-67: column-reverse */
  .un-about-columns {
    flex-direction: column-reverse;
  }

  /* #div_block-624-67 */
  .un-about-text {
    text-align: left;
    align-items: center;
    margin-top: -30px;
    padding-top: 0;
  }

  /* #headline-627-67 */
  .un-about-headline {
    font-size: 31px;
    text-align: center;
  }

  /* #text_block-382-189 */
  .un-about-copy {
    font-size: 20px;
    text-align: center;
  }

  /* #div_block-625-67 */
  .un-about-media {
    margin-bottom: 0;
    padding-bottom: 102px;
  }

  /* #div_block-637-67 */
  .un-about-logocard {
    padding: 7px 13px;
    margin-top: 0;
  }

  /* .primary-icon @767 */
  .un-work-icon {
    margin-bottom: 30px;
  }

  /* #image-638-67 */
  .un-about-logo {
    max-width: 110px;
  }

  /* #section-769-67 inner */
  .un-work .section-inner {
    padding: 15px 20px 57px;
  }

  /* #div_block-675-67 */
  .un-work-head {
    align-items: center;
    text-align: center;
  }

  /* #text_block-678-67 */
  .un-work-headline {
    font-size: 31px;
  }

  /* #text_block-687-67 */
  .un-work-copy {
    font-size: 20px;
  }

  /* #div_block-640-67 / #div_block-691-67 */
  .un-gallery-row {
    flex-direction: column;
  }

  .un-gallery-col {
    width: 100%;
    height: 720px;
  }

  /* universal.css .flex-2/.flex-1 @767 */
  .un-flex-2 {
    width: 100%;
    height: 350px;
  }

  .un-flex-1 {
    height: 350px;
    width: 100%;
  }

  /* #section-639-67 inner */
  .un-spacer .section-inner {
    padding: 86px 20px 2px;
  }
}

@media (max-width: 479px) {
  /* #div_block-675-67 */
  .un-work-head {
    padding-bottom: 3px;
  }

  .un-gallery-col {
    height: auto;
  }

  /* universal.css .flex-2/.flex-1 @479 */
  .un-flex-2 {
    height: 250px;
  }

  .un-flex-1 {
    height: 250px;
  }

  /* #section-639-67 inner */
  .un-spacer .section-inner {
    padding: 44px 20px 0;
  }
}