/* ============================================================
   Seite: Informationssicherheit (Page-ID 155)
   /leistungen/it-sicherheit-und-backup/informationssicherheit/

   ACHTUNG: Enthält zusätzlich das GEMEINSAME SKELETT (Prefix sk-)
   der beiden T63/T155-Seiten Informationssicherheit (155) und
   E-Mail-Archivierung (159). page-e-mail-archivierung.php lädt
   diese Datei als Abhängigkeit mit! sk-Regeln daher nur ändern,
   wenn beide Seiten geprüft werden.

   Werte 1:1 aus Original 155.css / 159.css + universal.css
   (Oxygen-IDs im Kommentar). lp-* Bausteine: leistung-shared.css.
   Seitenspezifisch 155: Prefix is-
   ============================================================ */

/* ============================================================
   GEMEINSAMES SKELETT (sk-) — Seiten 155 + 159
   ============================================================ */

/* Original sitewide: .ct-span { display:inline-block } */
.sk-cspan {
  display: inline-block;
}

/* ------------------------------------------------------------
   Hero (Template 63): Blob-Puls + grüner Outline-Button
   ------------------------------------------------------------ */
.sk-hero .lp-intro-blob #state-1,
.sk-hero .lp-intro-blob #state-2,
.sk-hero .lp-intro-blob #state-3 {
  opacity: 0;
  transition: opacity .1s;
}

@keyframes sk-fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: .3; }
}

.sk-hero .lp-intro-blob #state-1 {
  animation: sk-fade-in-out 3s .5s infinite;
}

.sk-hero .lp-intro-blob #state-2 {
  animation: sk-fade-in-out 3s 1s infinite;
}

.sk-hero .lp-intro-blob #state-3 {
  animation: sk-fade-in-out 3s 1.5s infinite;
}

/* #link_button-10968-63: btn-outline-green, Text weiß */
.sk-hero .lp-intro-btns .btn-outline-green {
  color: #fdfeff;
}

@media (max-width: 767px) {
  .sk-hero .lp-intro-btns .btn-outline-green {
    min-width: 253px;
  }
}

/* ------------------------------------------------------------
   #mehr-Intro-Block (Abweichungen zum lp---center-Baustein)
   ------------------------------------------------------------ */

/* #text_block-10871-63: fix 54px (statt headline-xl-Variable) */
.sk-mehr .lp-intro-block-headline {
  font-size: 54px;
}

/* #text_block-10873-63: lh 1.5, max. 1295px (lp: 1300px) */
.sk-mehr .lp-intro-block-copy {
  line-height: 1.5;
  max-width: 1295px;
}

@media (max-width: 767px) {
  .sk-mehr .lp-intro-block-headline {
    font-size: 31px;
  }

  /* #mehr @767: Original behält padding-top 142px (lp: 25px) */
  .sk-mehr {
    padding-top: 142px;
  }
}

/* ------------------------------------------------------------
   Sektionen: Inner-Wrap zentrieren + erste Body-Sektion
   (section-10882-63: unten 0)
   ------------------------------------------------------------ */
.sk-sec .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sk-sec-first .section-inner {
  padding: 85px 50px 0;
}

@media (max-width: 767px) {
  .sk-sec-first .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ------------------------------------------------------------
   M-Strong-Text-Bild-Reihen (new_columns-10883-63 / -10990-63)
   ------------------------------------------------------------ */
.sk-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 999;
}

@media (max-width: 1399px) {
  .sk-row > .sk-col {
    width: 100% !important;
  }
}

.sk-col {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* #div_block-10884-63 (Bild links) */
.sk-col--img-l {
  padding-left: 0;
  text-align: left;
  align-items: center;
}

/* #div_block-10991-63 (Bild rechts) */
.sk-col--img-r {
  padding-right: 0;
  text-align: left;
  align-items: center;
}

.sk-col--img-l img,
.sk-col--img-r img {
  width: 100%;
  border-radius: 15px;
}

/* #div_block-10886-63 (Text rechts) */
.sk-col--text-r {
  padding-left: 50px;
  padding-right: 0;
}

/* #div_block-10993-63 (Text links) */
.sk-col--text-l {
  padding-left: 0;
  padding-right: 50px;
}

/* #text_block-10887-63 / -10994-63 (.M-Strong) */
.sk-mstrong {
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: 37px;
  font-weight: 400;
}

.sk-mstrong--dark {
  color: #223a4f;
}

.sk-mstrong--dark span {
  color: #fdfeff;
}

.sk-mstrong--light {
  color: #fdfeff;
  max-width: 650px;
}

.sk-mstrong--light span {
  color: #223a4f;
}

/* #text_block-10889-63 / -10996-63 */
.sk-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

@media (max-width: 767px) {
  .sk-col--img-l {
    padding-right: 0;
    padding-top: 0;
  }

  .sk-col--img-r {
    padding-left: 0;
  }

  .sk-col--text-r {
    padding-left: 0;
  }

  .sk-col--text-l {
    padding-right: 0;
  }

  .sk-mstrong {
    font-size: 31px;
    text-align: center;
  }

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

/* ------------------------------------------------------------
   Icon-Bausteine: .primary-icon (universal.css)
   ------------------------------------------------------------ */
.sk-body .primary-icon {
  width: 150px;
  height: 150px;
}

.sk-body .primary-icon .st1 {
  fill: var(--primary-1000);
}

@media (max-width: 767px) {
  .sk-body .primary-icon {
    margin-bottom: 30px;
  }
}

/* ------------------------------------------------------------
   CTA (section-11194-155): lp-cta + Abweichungen
   #headline-11198-155: ragt rechts über die Spalte
   (Farbe wie Original/lp: #111 Basis, Span grün)
   ------------------------------------------------------------ */
.sk-cta-headline {
  margin-right: -91px;
}

@media (max-width: 1399px) {
  .sk-cta-headline {
    margin-right: 0;
  }
}

/* #text_block-11202-155 @479: 20px (lp: 18px) — gilt für 155 + 159 */
@media (max-width: 479px) {
  .sk-sec .lp-cta-copy {
    font-size: 20px;
  }
}

/* ============================================================
   SEITENSPEZIFISCH 155 (is-)
   ============================================================ */

/* ------------------------------------------------------------
   Sektion "Vorbeugung und Reaktion" + Icon-Reihen
   (section-11103-155)
   ------------------------------------------------------------ */
.is-tiefe {
  position: relative;
}

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

/* #new_columns-10990-63 */
.is-vorbeugung {
  margin-top: 162px;
  margin-bottom: 156px;
}

/* Icon-Reihen (new_columns-10891/10899-63, -11121/11131/11140-155) */
.is-iconrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  position: relative;
  z-index: 15;
}

@media (max-width: 1399px) {
  .is-iconrow > .is-iconrow-main,
  .is-iconrow > .is-iconrow-spacer {
    width: 100% !important;
  }
}

/* Inhaltspalte links (#div_block-10894-63, -11122-155, -11141-155) */
.is-iconrow-main {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  text-align: left;
  align-items: flex-start;
}

.is-iconrow-main--left {
  padding-left: 0;
}

/* Inhaltspalte rechts (#div_block-10900-63, -11133-155) */
.is-iconrow-main--right {
  text-align: center;
  align-items: flex-start;
  justify-content: center;
}

/* Leerspalten (#div_block-10892/10902-63, -11129/11132/11148-155) */
.is-iconrow-spacer {
  width: 50%;
  padding: 20px;
}

.is-iconrow-spacer--left {
  padding-left: 42px;
}

/* Textblock neben dem Icon (#div_block-11040-63 u.a.) */
.is-icontext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Headlines (#text_block-10895/10903-63, -11125/11136/11144-155) */
.is-h31 {
  line-height: 1.2;
  color: #223a4f;
  margin-bottom: 20px;
  font-size: 31px;
}

.is-h31 span {
  color: #fdfeff;
}

.is-h31--max650 {
  max-width: 650px;
}

/* Copy-Abweichung: #text_block-10905-63 / -11139-155: mb 14px */
.is-copy--mb14 {
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .is-tiefe .section-inner {
    padding: 15px 20px 57px;
  }

  .is-vorbeugung {
    flex-direction: column-reverse;
    margin-bottom: 127px;
  }

  /* #div_block-10886-63 @767 (nur 155) */
  .is-risiko .sk-col--text-r {
    text-align: left;
    align-items: center;
  }

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

  /* #div_block-11122-155 @767: behält padding-right 20px */
  .is-iconrow--hygiene .is-iconrow-main {
    padding-right: 20px;
  }

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

  /* Abstände je Reihe (Original) */
  .is-iconrow--business .is-iconrow-main { margin-bottom: 53px; }
  .is-iconrow--liefer .is-iconrow-main { margin-bottom: 65px; }
  .is-iconrow--hygiene .is-iconrow-main { margin-bottom: 75px; }
  .is-iconrow--krypto .is-iconrow-main { margin-bottom: 60px; }
  .is-iconrow--komm .is-iconrow-main { padding-bottom: 0; }

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

  /* nur -11124/-11135/-11143-155 zentrieren mobil */
  .is-icontext--m-center {
    text-align: left;
    align-items: center;
  }

  .is-h31 {
    text-align: center;
  }

  /* #code_block-11038-63 @767 */
  .is-icon--business {
    margin-left: 10px;
  }

  /* #text_block-10897-63 @767: mb 0 */
  .is-copy--business {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------
   Zielgruppen-Spalten (div_block-11267-155, im CTA-Section-Inner)
   ------------------------------------------------------------ */
.is-audience {
  margin-top: 150px;
  z-index: 999;
  width: 100%;
}

/* #new_columns-11219-155 */
.is-audience-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

@media (max-width: 1399px) {
  .is-audience-columns > .is-audience-col {
    width: 100% !important;
  }
}

/* #div_block-11220/11221/11222-155 */
.is-audience-col {
  width: 33.33%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.is-audience-col:last-child {
  width: 33.34%;
}

/* #div_block-11223/11231/11239-155 */
.is-audience-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .is-audience-inner {
    text-align: left;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   Überlapp-Panel "Ihr Partner für individuelle Cybersicherheit"
   (section-11268-155)
   ------------------------------------------------------------ */
.is-panel .section-inner {
  padding: 459px 20px 150px;
}

/* #new_columns-11269-155 */
.is-panel-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 9;
  margin-top: -350px;
  margin-bottom: -350px;
}

/* #div_block-11270-155 / -11272-155 */
.is-panel-col {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.is-panel-col--img {
  justify-content: center;
}

/* #image-11271-155 (+ .border-radius-global .drop_shadow) */
.is-panel-col img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

/* #headline-11273-155 */
.is-panel-headline {
  margin: 0 0 29px;
  font-size: 37px;
  color: #ffffff;
  max-width: 664px;
}

.is-panel-headline span {
  color: #004270;
}

/* #text_block-11277-155 */
.is-panel-copy {
  color: #ffffff;
  font-size: 22px;
  max-width: 900px;
  text-align: left;
}

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

  .is-panel-columns {
    margin-top: 0;
    margin-bottom: 0;
  }

  .is-panel-columns > .is-panel-col {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .is-panel-col {
    padding-left: 0;
    padding-right: 0;
  }

  .is-panel-headline {
    font-size: 31px;
    text-align: center;
  }

  .is-panel-copy {
    font-size: 20px;
  }
}