/* ============================================================
   SEITE: Externer Datenschutzbeauftragter (ID 724)
   Bausteine der Oxygen-Templates 63 + 155 (Prefix sz-) — identisch
   dupliziert in informationssicherheit-backup.css (laden nie zusammen).
   Seitenspezifisch: edsb- (Sektion 11298-724 + Fussnote) sowie
   Farbvarianten der Icon-Headlines.
   Werte 1:1 aus 724.css + universal.css (Oxygen-Element-IDs).
   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;
}

.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;
}

/* ------------------------------------------------------------
   Punkt-1-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;
}

/* Punkt 2: 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 724: Headline hell, Span dunkel */
.sz-icon-headline {
  color: #fdfeff;
}

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

.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;
  }
}

/* ------------------------------------------------------------
   Seiten-Sektion 11298-724: "Effektiver Datenschutz, der wirkt"
   ------------------------------------------------------------ */
.edsb-wirkt .section-inner {
  padding-top: 459px;
  padding-bottom: 87px;
}

.edsb-wirkt-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  position: relative;
  z-index: 9;
  margin-top: -350px;
  margin-bottom: -350px;
}

.edsb-wirkt-col {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.edsb-wirkt-img {
  max-height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

.edsb-wirkt-headline {
  margin: 0 0 29px;
  font-size: 37px;
  color: #ffffff;
  max-width: 664px;
  line-height: 1.2;
}

.edsb-wirkt-headline span {
  color: #223a4f;
  display: inline-block;
}

.edsb-wirkt-copy {
  color: #ffffff;
  font-size: 22px;
  max-width: 700px;
  font-weight: 300;
}

.edsb-wirkt-copy-inner {
  text-align: center;
}

/* Fussnote unter der CTA-Box */
.edsb-footnote {
  margin-top: 150px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.edsb-footnote-text {
  text-align: center;
  color: #fdfeff;
  font-size: 14px;
}

/* ============================================================
   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,
  .edsb-wirkt-columns > .edsb-wirkt-col {
    width: 100% !important;
  }

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

  .edsb-wirkt .section-inner {
    padding-bottom: 0;
  }

  .edsb-wirkt-columns {
    margin-top: 0;
    margin-bottom: 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-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;
  }

  .edsb-wirkt-col {
    padding-left: 0;
    padding-right: 0;
  }

  .edsb-wirkt-headline {
    font-size: 31px;
    text-align: center;
  }

  .edsb-wirkt-copy {
    font-size: 20px;
  }
}