/* ============================================================
   SEITE: Informationssicherheit-Backup (ID 722)
   Bausteine der Oxygen-Templates 63 + 155 (Prefix sz-) — identisch
   dupliziert in externer-datenschutzbeauftragter.css (laden nie
   zusammen). Seitenspezifisch: fuenf Icon-Zeilen (a-e) und
   Farbvariante der Icon-Headlines (dunkel mit hellen Spans).
   Werte 1:1 aus 722.css (dynamisch generiert) + universal.css.
   Hero + CTA kommen aus leistung-shared.css (lp-, nur genutzt).
   ============================================================ */

/* ------------------------------------------------------------
   Intro-Block "#mehr" (Template 63, .first-section)
   ------------------------------------------------------------ */
.sz-mehr {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 142px 50px 20px;
}

.sz-mehr-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 5;
  position: relative;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.sz-mehr-col {
  width: 100%;
  padding: 20px 20px 20px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.sz-mehr-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  font-size: 54px;
  text-align: center;
  /* Original trennt "Sicherheitszertifizierung" nicht (kein hyphens:auto) */
  hyphens: manual;
}

.sz-mehr-headline span {
  color: #223a4f;
  display: inline-block;
}

.sz-mehr-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  max-width: 1295px;
  text-align: center;
}

/* ------------------------------------------------------------
   Risikomanagement-Sektion (Template 63, section-10882): Bild links
   ------------------------------------------------------------ */
.sz-row1 .section-inner {
  padding: 85px 50px 0;
}

.sz-row1-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 999;
}

.sz-row1-col-img {
  width: 50%;
  padding: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.sz-row1-col-img img,
.sz-row2-col-img img {
  width: 100%;
}

.sz-row1-col-text {
  width: 50%;
  padding: 20px 0 20px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

/* "M-Strong"-Headlines (37px) */
.sz-strong {
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: 37px;
  font-weight: 400;
}

.sz-strong span {
  display: inline-block;
}

.sz-strong--dark {
  color: #223a4f;
}

.sz-strong--dark span {
  color: #fdfeff;
}

.sz-strong--light {
  color: #fdfeff;
  max-width: 650px;
}

.sz-strong--light span {
  color: #223a4f;
}

.sz-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

/* ------------------------------------------------------------
   Deep-Sektion (Template 155, section-11103)
   ------------------------------------------------------------ */
.sz-deep {
  position: relative;
  display: block;
}

.sz-deep .section-inner {
  padding: 0 50px 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vorbeugung: Text links, Bild rechts */
.sz-row2-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 999;
  margin-top: 162px;
  margin-bottom: 156px;
}

.sz-row2-col-text {
  width: 50%;
  padding: 20px 50px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.sz-row2-col-img {
  width: 50%;
  padding: 20px 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

/* Icon-Zeilen */
.sz-iconrow {
  position: relative;
  z-index: 15;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.sz-iconrow-main {
  width: 50%;
  padding: 20px 20px 20px 0;
  text-align: left;
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.sz-iconrow-main--right {
  padding: 20px;
  text-align: center;
  align-items: flex-start;
  justify-content: center;
}

.sz-iconrow-spacer {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sz-iconrow-spacer--pad {
  padding-left: 42px;
  align-items: flex-start;
  justify-content: flex-start;
}

.sz-icon {
  width: 150px;
  height: 150px;
}

.sz-icon > svg {
  width: 150px;
  height: 150px;
}

.sz-iconrow-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.sz-icon-headline {
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: 31px;
}

.sz-icon-headline--max {
  max-width: 650px;
}

.sz-icon-headline span {
  display: inline-block;
}

/* Farbvariante Seite 722: Headline dunkel, Span hell */
.sz-icon-headline {
  color: #223a4f;
}

.sz-icon-headline span {
  color: #fdfeff;
}

.sz-icon-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

.sz-icon-copy--mb14 {
  margin-bottom: 14px;
}

/* ------------------------------------------------------------
   CTA-Overrides (Template 155 statt 315): Headline weiss/gruen
   ------------------------------------------------------------ */
.sz-cta .lp-cta-headline {
  /* Farbe bleibt wie lp (#111): WP-Global-Styles setzen h1-h6 auf contrast,
     .white-text greift im Original NICHT auf die H2 */
  margin-right: -91px;
}

.sz-cta .lp-cta-headline span {
  color: #32b4a2;
  display: inline-block;
}

/* Original 155: Copy bleibt auch unter 479px bei 20px (lp geht auf 18px) */
@media (max-width: 479px) {
  .sz-cta .lp-cta-copy {
    font-size: 20px;
  }
}

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

@media (max-width: 1399px) {
  .sz-mehr-columns {
    flex-direction: column;
  }

  .sz-mehr-columns > .sz-mehr-col,
  .sz-row1-columns > .sz-row1-col-img,
  .sz-row1-columns > .sz-row1-col-text,
  .sz-row2-columns > .sz-row2-col-text,
  .sz-row2-columns > .sz-row2-col-img,
  .sz-iconrow > .sz-iconrow-main,
  .sz-iconrow > .sz-iconrow-spacer {
    width: 100% !important;
  }

  .sz-cta .lp-cta-headline {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .sz-mehr {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sz-mehr-col {
    padding-left: 0;
    padding-right: 0;
  }

  .sz-mehr-headline {
    font-size: 31px;
  }

  .sz-mehr-copy {
    font-size: 20px;
  }

  .sz-row1 .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sz-row1-col-img {
    padding-top: 0;
    padding-right: 0;
  }

  .sz-row1-col-text {
    padding-left: 0;
    text-align: left;
    align-items: center;
  }

  .sz-strong {
    font-size: 31px;
    /* universal.css .M-Strong: mobil zentriert (alle Varianten) */
    text-align: center;
  }

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

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

  .sz-row2-columns {
    flex-direction: column-reverse;
    margin-bottom: 127px;
  }

  .sz-row2-col-text {
    padding-right: 0;
  }

  .sz-row2-col-img {
    padding-left: 0;
  }

  .sz-iconrow-main {
    flex-direction: column;
    gap: 0;
    text-align: left;
    align-items: center;
    padding-right: 0;
  }

  .sz-iconrow-main--right {
    padding-left: 0;
    padding-right: 0;
  }

  .sz-iconrow--a .sz-iconrow-main {
    margin-bottom: 53px;
  }

  .sz-iconrow--b .sz-iconrow-main {
    margin-bottom: 65px;
  }

  .sz-iconrow--c .sz-iconrow-main {
    margin-bottom: 75px;
    /* Original 11122-155 behaelt mobil padding-right 20px */
    padding-right: 20px;
  }

  .sz-iconrow--d .sz-iconrow-main {
    margin-bottom: 60px;
  }

  .sz-iconrow--e .sz-iconrow-main {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .sz-iconrow-spacer {
    display: none;
  }

  .sz-icon {
    margin-bottom: 30px;
  }

  .sz-icon--a {
    margin-left: 10px;
  }

  .sz-iconrow-body {
    /* Original @767: Icon-Textspalten zentrieren ihre Kinder */
    align-items: center;
  }

  .sz-icon-headline {
    text-align: center;
  }

  .sz-icon-copy {
    font-size: 20px;
    text-align: center;
  }

  .sz-iconrow--a .sz-icon-copy {
    margin-bottom: 0;
  }
}