/* ============================================================
   Zeiterfassung (166) — /telefon-und-zeiterfassung/zeiterfassung/
   Seitenspezifische Styles (Prefix ze-), Werte 1:1 aus 166.css
   + universal.css. Gemeinsame Bausteine aus leistung-shared.css
   (lp-*) — hier nur Abweichungen davon.
   ============================================================ */

/* --- Intro-Block "#mehr" (padding-bottom 72, eigene Maxbreiten) --- */
.ze-mehr {
  padding-bottom: 72px;
}

.ze-mehr-headline {
  max-width: 1100px;
}

.ze-mehr-headline span,
.ze-media-headline span,
.ze-benefit-headline span,
.ze-if-headline span,
.ze-why-headline span,
.ze-cta-headline span {
  display: inline-block;
}

.ze-mehr-copy.lp-intro-block-copy {
  max-width: 1295px;
}

/* ------------------------------------------------------------
   Video im Hero (div_block-10967-166, .first-section)
   ------------------------------------------------------------ */
.ze-video {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 142px 50px;
}

/* div_block-10974-166 */
.ze-video-col {
  width: 50%;
  padding: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
}

/* code_block-10976-166 */
.ze-video-wrap {
  width: 100%;
  max-width: 961px;
}

.ze-video-wrap video {
  max-width: 100%;
}

/* ------------------------------------------------------------
   Bild + Text (section-1797-12)
   ------------------------------------------------------------ */
.ze-media .section-inner {
  padding-top: 400px;
  padding-bottom: 40px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* new_columns-1798-12 */
.ze-media-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  z-index: 9;
  position: relative;
  margin-top: -350px;
  margin-bottom: -350px;
}

.ze-media-col {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* image-10871-166 (+ .drop_shadow) */
.ze-media-col--img img {
  max-height: 280px;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* headline-10870-166 */
.ze-media-headline {
  font-size: 37px;
  color: #ffffff;
  max-width: 664px;
  margin: 0 0 29px;
  line-height: 1.2;
  font-weight: 400;
}

.ze-media-headline span {
  color: #223a4f;
}

/* text_block-10883-166 */
.ze-media-copy {
  color: #ffffff;
  font-size: 22px;
  max-width: 700px;
}

/* ------------------------------------------------------------
   Benefit-Karten (section-10885-166)
   ------------------------------------------------------------ */
.ze-benefits {
  position: relative;
  z-index: 3;
}

.ze-benefits .section-inner {
  padding-right: 50px;
  padding-left: 50px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* div_block-10907-166 / 10914-166 */
.ze-benefit-row {
  width: 100%;
  text-align: left;
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  gap: 50px;
  margin-bottom: 50px;
}

.ze-benefit-row--first {
  margin-bottom: 60px;
}

.ze-benefit {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* universal: .small { width:85; height:85; margin-bottom:30 } */
.ze-benefit-icon,
.ze-benefit-icon svg {
  width: 85px;
  height: 85px;
}

.ze-benefit-icon {
  margin-bottom: 30px;
}

/* headline-10892-166 usw. */
.ze-benefit-headline {
  font-size: 26px;
  color: #223a4f;
  line-height: 1;
  margin: 0 0 10px;
  font-weight: 400;
}

/* text_block-10894-166 usw. */
.ze-benefit-copy {
  font-weight: 300;
  color: #ffffff;
  font-size: 22px;
}

/* ------------------------------------------------------------
   Schnittstellen + Warum Leopold (section-10933-166)
   ------------------------------------------------------------ */
.ze-deep {
  display: block;
  position: relative;
}

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

/* new_columns-10934-166 */
.ze-if-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  z-index: 15;
  position: relative;
}

.ze-if-col {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* div_block-10937-166 (padding-right 0 im Original, @1920 padding-left 0) */
.ze-if-col--text {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* div_block-10938-166 */
.ze-if-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-right: 144px;
}

/* headline-10939-166 (.M-Strong: lh 1.2, fw 400) */
.ze-if-headline {
  margin: 0 0 16px;
  font-size: 37px;
  color: #223a4f;
  line-height: 1.2;
  font-weight: 400;
}

.ze-if-headline span {
  color: #32b4a2;
}

/* text_block-10943-166 (.Heading-Pre: lh 1.4) */
.ze-if-copy {
  font-weight: 300;
  margin-bottom: 45px;
  font-size: 22px;
  line-height: 1.4;
}

/* _rich_text-10954-166 (.bm-own-list, universal) */
.ze-if-list ul {
  padding: 0 0 0 20px;
  margin: 0;
}

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

.ze-if-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: "";
}

/* div_block-10935-166 (@1920 padding-right 30) */
.ze-if-col--img {
  text-align: center;
  align-items: flex-start;
  justify-content: center;
  padding-right: 30px;
}

/* image-10936-166 */
.ze-if-col--img img {
  border-radius: 15px;
  width: 100%;
  max-width: 750px;
  object-fit: cover;
  z-index: 4;
  position: relative;
}

/* new_columns-10955-166 */
.ze-why-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 171px;
  position: relative;
  z-index: 4;
}

/* div_block-10956-166 */
.ze-why-col {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
}

/* code_block-10958-166 (+ .primary-icon 150x150) */
.ze-why-icon {
  margin-bottom: 30px;
}

.ze-why-icon svg {
  width: 150px;
  height: 150px;
}

/* headline-10959-166 */
.ze-why-headline {
  font-size: 37px;
  color: #223a4f;
  margin: 0 0 20px;
  line-height: 1.2;
  font-weight: 400;
}

.ze-why-headline span {
  color: #ffffff;
}

/* text_block-10963-166 */
.ze-why-copy {
  font-size: 22px;
  font-weight: 300;
  color: #fdfeff;
  text-align: center;
  max-width: 1295px;
}

/* ------------------------------------------------------------
   CTA-Abweichungen (wie it-infrastruktur: Box ohne Padding,
   Headline ragt rechts ueber, Copy @479 20px)
   ------------------------------------------------------------ */
.ze-cta .lp-cta-box {
  padding-top: 0;
  padding-bottom: 0;
}

.ze-cta-headline {
  margin-right: -91px;
}

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

@media (max-width: 1399px) {
  .ze-media .section-inner {
    padding-bottom: 0;
  }

  .ze-media-cols {
    margin-top: 0;
    margin-bottom: 0;
  }

  .ze-media-cols > .ze-media-col,
  .ze-if-cols > .ze-if-col,
  .ze-why-row > .ze-why-col {
    width: 100% !important;
  }

  .ze-video-col {
    padding-right: 0;
    padding-top: 0;
  }

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

  .ze-if-col--img {
    text-align: center;
    align-items: flex-start;
    padding-right: 15px;
  }

  .ze-if-col--img img {
    width: 90%;
  }

  .ze-cta-headline {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  /* Original: #mehr behaelt 142px oben (shared setzt 25px) */
  .ze-mehr {
    padding-top: 142px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ze-mehr .lp-intro-block-text {
    padding-left: 0;
    padding-right: 0;
  }

  .ze-video {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ze-video-wrap {
    margin-top: 0;
  }

  .ze-media-col {
    padding-left: 0;
    padding-right: 0;
  }

  .ze-media-headline {
    font-size: 31px;
    margin-bottom: 9px;
  }

  .ze-media-copy {
    font-size: 20px;
  }

  .ze-benefits .section-inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  .ze-benefit-row {
    flex-direction: column;
    display: flex;
  }

  .ze-benefit {
    width: 100%;
    text-align: left;
    align-items: center;
  }

  .ze-benefit-headline {
    text-align: center;
  }

  .ze-benefit-copy {
    font-size: 20px;
    text-align: center;
  }

  .ze-deep .section-inner {
    padding: 15px 20px 57px;
  }

  .ze-if-cols {
    flex-direction: column-reverse;
    display: flex;
  }

  .ze-if-col--text {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .ze-if-text {
    padding-right: 0;
  }

  .ze-if-headline {
    font-size: 31px;
  }

  .ze-if-copy {
    font-size: 20px;
    text-align: center;
  }

  /* universal .bm-own-list li @767: 20px */
  .ze-if-list ul li {
    font-size: 20px;
  }

  .ze-if-col--img {
    padding-left: 0;
    padding-right: 0;
  }

  .ze-if-col--img img {
    width: 100%;
  }

  .ze-why-row {
    margin-top: 72px;
  }

  .ze-why-col {
    padding-right: 0;
    padding-left: 0;
    align-items: center;
    text-align: center;
  }

  /* code_block @767 mb 0, aber universal .primary-icon @767 mb 30 */
  .ze-why-icon {
    margin-bottom: 0;
  }

  .ze-why-icon svg {
    margin-bottom: 30px;
  }

  .ze-why-headline {
    text-align: center;
    font-size: 31px;
  }

  .ze-why-copy {
    font-size: 20px;
  }

  .lp-body .ze-deep .lp-blob-bg img {
    padding-left: 20px;
    padding-right: 20px;
  }
}

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

  /* wie it-infrastruktur: CTA-Copy bleibt 20px (lp: 18px) */
  .ze-cta .lp-cta-copy {
    font-size: 20px;
  }
}