/* ============================================================
   Starface Telefonanlagen (164) — /telefonie-3/starface-telefonanlagen/
   Seitenspezifische Styles (Prefix sf-), Werte 1:1 aus 164.css
   + universal.css. Gemeinsame Bausteine kommen aus
   leistung-shared.css (lp-*) — hier nur Abweichungen davon.
   ============================================================ */

/* --- Intro-Block "#mehr": Original hat 177px oben (statt 142px) --- */
.sf-mehr {
  padding-top: 177px;
  padding-bottom: 20px;
}

/* Original: #div_block-10680-61 padding-left:42px, Inhalt zentriert */
.sf-mehr .lp-intro-block-text {
  padding-left: 42px;
}

.sf-mehr-headline {
  max-width: 847px;
}

/* Original universal.css: .ct-span { display:inline-block } —
   Spans in Headlines brechen als Block um */
.sf-mehr-headline span,
.sf-cta-headline span,
.sf-feature-headline span,
.sf-h37 span {
  display: inline-block;
}

/* Original: #text_block-10701-61 max-width 1400, kein Margin unten */
.sf-mehr-copy.lp-intro-block-copy {
  max-width: 1400px;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Video-Sektion (section-10874-164)
   ------------------------------------------------------------ */
.sf-video {
  position: relative;
  z-index: 3;
  text-align: left;
}

.sf-video .section-inner {
  padding-top: 19px;
  padding-bottom: 71px;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sf-video-wrap {
  width: 100%;
  max-width: 961px;
}

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

/* ------------------------------------------------------------
   Feature-Zeilen (section-10876-164)
   ------------------------------------------------------------ */
.sf-features {
  position: relative;
  z-index: 3;
}

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

.sf-feature-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin-bottom: 75px;
}

.sf-feature-row--last {
  margin-bottom: 0;
}

.sf-feature-col {
  width: 50%;
  padding: 20px;
}

.sf-feature-col--content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  text-align: left;
}

.sf-feature-icon svg {
  width: 150px;
  height: 150px;
}

.sf-feature-text {
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.sf-feature-headline {
  font-size: 31px;
  line-height: 1;
  margin: 0 0 20px;
  color: #111;
}

.sf-feature-headline span {
  color: #223a4f;
}

.sf-feature-copy {
  font-weight: 300;
  font-size: 22px;
  max-width: 600px;
}

/* ------------------------------------------------------------
   CTA + Appliance + VM/Cloud (section-11019-164)
   ------------------------------------------------------------ */
.sf-deep {
  position: relative;
  display: block;
}

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

/* CTA-Box-Variante: dunkelgrau, 157px Abstand nach unten,
   Original-Box (10918) ohne Innen-Padding oben/unten */
.sf-cta-box {
  background-color: #2f2f2f;
  margin-bottom: 157px;
  padding-top: 0;
  padding-bottom: 0;
}

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

/* Appliance-Zeile (new_columns-10975-164) */
.sf-app-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  z-index: 3;
  position: relative;
}

.sf-app-col {
  width: 50%;
  padding: 20px;
}

.sf-app-col--text {
  display: flex;
  flex-direction: row;
  gap: 40px;
  text-align: left;
}

.sf-duo-textbox {
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.sf-app-col--img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sf-app-col--img img {
  max-width: 100%;
  height: auto;
}

.sf-h37 {
  font-size: 37px;
  line-height: 1;
  margin: 0 0 20px;
  color: #111;
}

.sf-h37 span {
  color: #223a4f;
}

.sf-copy22 {
  font-weight: 300;
  font-size: 22px;
  max-width: 700px;
}

.sf-copy22--center {
  text-align: center;
}

/* VM/Cloud-Zeile (new_columns-11044-164) */
.sf-duo-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin-top: 146px;
  margin-bottom: 0;
  z-index: 3;
  position: relative;
}

.sf-duo-col {
  display: flex;
  width: 50%;
  padding: 20px;
  flex-direction: column;
  gap: 40px;
  text-align: left;
  align-items: center;
}

.sf-duo-icon svg {
  width: 150px;
  height: 150px;
}

.sf-duo-text {
  color: #ffffff;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

@media (max-width: 1399px) {
  .sf-deep {
    height: auto;
  }

  .sf-feature-row > .sf-feature-col,
  .sf-app-row > .sf-app-col,
  .sf-duo-row > .sf-duo-col {
    width: 100% !important;
  }

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

@media (max-width: 767px) {
  /* Original: #mehr behaelt 177px oben, nur 20px seitlich
     (leistung-shared setzt fuer den Pilot 25px oben) */
  .sf-mehr {
    padding-top: 177px;
    padding-left: 20px;
    padding-right: 20px;
  }

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

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

  .sf-features .section-inner {
    padding-right: 20px;
    padding-bottom: 51px;
    padding-left: 20px;
  }

  .sf-feature-col--content {
    flex-direction: column;
    display: flex;
    text-align: left;
    align-items: center;
    gap: 0;
  }

  /* Original: nur Zeile 1+2 (10878/10891) verlieren das seitliche
     Padding, Zeile 3 (10905) behaelt es */
  .sf-feature-row:not(.sf-feature-row--last) .sf-feature-col--content {
    padding-left: 0;
    padding-right: 0;
  }

  .sf-feature-col--spacer {
    display: none;
  }

  /* Original universal.css @767: .primary-icon { margin-bottom:30px } */
  .sf-feature-icon svg,
  .sf-duo-icon svg {
    margin-bottom: 30px;
  }

  .sf-feature-text {
    text-align: left;
    align-items: center;
  }

  .sf-feature-headline {
    text-align: center;
  }

  .sf-feature-copy {
    font-size: 20px;
    text-align: center;
  }

  .sf-deep .section-inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  .sf-cta-box {
    margin-bottom: 35px;
  }

  .sf-cta-headline {
    width: 100%;
    text-align: center;
    font-size: 30px;
  }

  .sf-app-row {
    position: relative;
    z-index: 15;
  }

  .sf-app-col--text {
    padding-left: 0;
    padding-right: 0;
  }

  .sf-duo-textbox {
    text-align: left;
    align-items: center;
  }

  .sf-h37 {
    font-size: 31px;
  }

  .sf-app-col--text .sf-h37 {
    text-align: center;
  }

  .sf-copy22 {
    font-size: 20px;
  }

  .sf-app-col--text .sf-copy22 {
    text-align: center;
  }

  /* Original: nur die VM-Spalte (11061) verliert das seitliche Padding */
  .sf-duo-col {
    gap: 0;
  }

  .sf-duo-col:first-child {
    padding-left: 0;
    padding-right: 0;
  }

  .sf-duo-text--vm {
    margin-bottom: 61px;
  }

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

@media (max-width: 479px) {
  .sf-deep .lp-blob-bg img {
    height: 1200px;
  }

  /* Original @479: CTA-Copy bleibt 20px (Pilot/shared setzt 18px) */
  .sf-cta-box .lp-cta-copy {
    font-size: 20px;
  }
}