/* ============================================================
   Seite: Managed Service (Page-ID 43, Prefix ms-)
   Pfad: /leistungen/it-service-und-beratung/managed-service/

   Eigenes Skelett (T43): Hero + zentrierter Intro-Block,
   Bild-Links-Sektion mit 260px-Banner, 2x3 Icon-Karten,
   Deep-Sektion (Text links / Bild rechts, KEIN has-blured-end),
   Standard-CTA (Template 315/334.css, wie Startseite), Blog.
   Werte 1:1 aus 43.css + 334.css; Hero OHNE Zusatzhöhe (die
   height-Regel in 43.css ist base64-kaputt und greift im
   Original nicht).
   ============================================================ */

/* Original universal.css: .ct-span ist inline-block */
.ms-hero .lp-intro-headline span,
.ms-hero .lp-intro-block-headline span,
.ms-media-headline span,
.ms-deep .lp-media-headline span,
.ms-iconrow .lp-iconrow-headline span,
.ms-cta-headline span {
  display: inline-block;
}

/* --- Intro-Block (#text_block-10871-43): Headline dunkel,
       Span weiss — invertiert zum Shared-Default --- */
.ms-hero .lp-intro-block-headline.ms-intro-headline {
  color: #223a4f;
  max-width: 1000px;
}

.ms-hero .lp-intro-block-headline.ms-intro-headline span {
  color: #ffffff;
}

/* #text_block-10873-43: width 100%, max 1295px (Shared: 1300px) */
.ms-hero .lp-intro-block--center .lp-intro-block-copy {
  width: 100%;
  max-width: 1295px;
}

/* ------------------------------------------------------------
   Sektion "Vollumfänglicher IT-Service" (#section-10874-43)
   Inner-Padding = Standard 85px/20px (kein Oxygen-Override!),
   Bild links 40% (Banner 260px hoch), Text rechts 60%.
   ------------------------------------------------------------ */
.ms-media-columns {
  z-index: 999; /* #new_columns-10875-43 */
}

.ms-media-col-img {
  width: 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.ms-media-col-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

.ms-media-col-text {
  width: 60%;
  padding: 20px 20px 20px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* #text_block-10879-43 */
.ms-media-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
}

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

/* #text_block-10881-43: ohne Font-Size-Klasse → 18px Standard */
.ms-media-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
}

/* ------------------------------------------------------------
   Icon-Karten (#section-10993-43)
   ------------------------------------------------------------ */
.ms-cards {
  position: relative;
  z-index: 3;
}

.ms-cards .section-inner {
  padding-left: 50px;
  padding-right: 50px;
}

/* #div_block-10994-43 / -11007-43 */
.ms-cards-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
  margin-bottom: 60px;
  text-align: left;
}

.ms-cards-row--last {
  margin-bottom: 50px;
}

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

/* Original universal.css .small: 85x85, margin-bottom 30 */
.ms-card-icon {
  width: 85px;
  height: 85px;
  margin-bottom: 30px;
}

.ms-card-icon svg {
  width: 85px;
  height: 85px;
}

/* #headline-10997-43 ff. */
.ms-card-title {
  font-size: 26px;
  color: #223a4f;
  line-height: 1;
  margin: 0 0 10px;
}

/* #text_block-10998-43 ff. */
.ms-card-text {
  font-weight: 300;
  color: #ffffff;
  font-size: 22px;
}

/* ------------------------------------------------------------
   Deep-Sektion (#section-11031-43): Text links / Bild rechts,
   Spalten stapeln erst bei 767 (nicht 1399!)
   ------------------------------------------------------------ */
.ms-deep .section-inner {
  padding-bottom: 182px; /* Shared: 89px */
}

/* #div_block-11035-43 */
.ms-deep-text-col {
  padding: 20px 76px 20px 0;
}

/* #div_block-11033-43 */
.ms-deep-img-col {
  padding-left: 25px;
}

@media (min-width: 1921px) {
  .ms-deep-img-col {
    padding-right: 20px;
  }
}

/* #image-11034-43: max 750px, KEIN Schatten */
.ms-deep .lp-media-col-img img {
  max-width: 750px;
}

/* ------------------------------------------------------------
   Icon-Sektion (#new_columns-11049-43)
   ------------------------------------------------------------ */
.ms-iconrow.lp-iconrow {
  margin-top: 210px; /* Shared: 179px */
}

/* #headline-11052-43: dunkel, Span weiss (invertiert zum Shared);
   Original hat KEINE feste Font-Size (headline-l-Variable, nicht 37px)
   und keinen margin-bottom — der 20px-Abstand haengt an der Copy */
.ms-iconrow .lp-iconrow-headline {
  color: #223a4f;
  font-size: var(--headline-l-size);
  margin-bottom: 0;
}

.ms-iconrow .lp-iconrow-headline span {
  color: #ffffff;
}

/* #text_block-11058-43: ohne Font-Size-Klasse → 18px, max 1300px */
.ms-iconrow .lp-iconrow-copy {
  font-size: 18px;
  max-width: 1300px;
  margin-top: 20px;
}

/* ------------------------------------------------------------
   CTA (334.css): #div_block-3598-12 hat KEIN vertikales Padding
   (Shared-Box: 50px) — die Hoehe kommt allein aus dem Inhalt
   ------------------------------------------------------------ */
.ms-cta .lp-cta-box {
  padding-top: 0;
  padding-bottom: 0;
}

/* #headline-3600-12 */
.ms-cta-headline {
  margin-right: -91px;
}

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

@media (max-width: 1399px) {
  /* #new_columns-10875-43: Spalten stapeln */
  .ms-media-columns > .ms-media-col-img,
  .ms-media-columns > .ms-media-col-text {
    width: 100% !important;
  }

  /* Shared-Pendant zu #div_block-11035-43 @1399 (Shorthand-Konflikt) */
  .ms-deep-text-col {
    padding-top: 43px;
  }

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

@media (max-width: 767px) {
  /* 43.css #mehr: mobil bleibt padding-top 142px (Shared: 25px) */
  .ms-hero .lp-intro-block {
    padding-top: 142px;
  }

  /* #div_block-10876-43: alle Seiten 0, unten bleibt 20px */
  .ms-media-col-img {
    padding: 0 0 20px;
  }

  /* #div_block-10878-43 */
  .ms-media-col-text {
    padding-left: 0;
    padding-right: 0;
  }

  /* #text_block-10879-43: mobil 31px, bleibt linksbuendig */
  .ms-media-headline {
    font-size: 31px;
  }

  .ms-cards .section-inner {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 31px;
  }

  .ms-cards-row {
    flex-direction: column;
  }

  .ms-card {
    width: 100%;
    align-items: center;
  }

  .ms-card--empty {
    display: none;
  }

  .ms-card-title {
    text-align: center;
  }

  .ms-card-text {
    font-size: 20px;
    text-align: center;
  }

  /* #section-11031-43: mobil 15/20/46 (Shared: 57 unten) */
  .ms-deep .section-inner {
    padding-bottom: 46px;
  }

  /* #new_columns-11032-43: mobil column-reverse (Bild oben) */
  .ms-deep-columns {
    flex-direction: column-reverse;
  }

  /* #div_block-11033-43: mobil l/r 0, oben/unten bleiben 20px */
  .ms-deep-img-col {
    padding: 20px 0;
  }

  /* #div_block-11035-43: rechts 0 (Shorthand-Konflikt mit Shared) */
  .ms-deep-text-col {
    padding-right: 0;
  }

  /* #headline-11037-43: mobil 30px (Shared: 31px) */
  .ms-deep .lp-media-headline {
    font-size: 30px;
  }

  /* #new_columns-11049-43: mobil 64px */
  .ms-iconrow.lp-iconrow {
    margin-top: 64px;
  }

  /* #headline-11052-43: mobil 31px */
  .ms-iconrow .lp-iconrow-headline {
    font-size: 31px;
  }

  /* #text_block-11058-43: bleibt 18px (Shared: 20px) */
  .ms-iconrow .lp-iconrow-copy {
    font-size: 18px;
  }
}

@media (max-width: 479px) {
  /* #text_block-3603-12 bleibt bei 20px (Shared: 18px) */
  .ms-cta .lp-cta-copy {
    font-size: 20px;
    margin-bottom: 0;
  }
}