/* ============================================================
   Seite: IT-Infrastruktur & Hardware (Page-ID 18)
   Nachbau des Redirect-Ziels /…/serverloesungen-storage/ (Seite 61):
   Werte 1:1 aus 61.css + universal.css (Oxygen-Element-IDs im Kommentar).
   Gemeinsame Bausteine (lp-*) in leistung-shared.css, Partner-Slider
   (partner-*) in leistungen.css — hier nur Seitenspezifisches (iih-*).
   ============================================================ */

/* ------------------------------------------------------------
   Hero: Blob-Ringe pulsieren wie im Original
   (universal.css: #state-1..3, fadeInOut 0 → .3 → 0)
   ------------------------------------------------------------ */
.iih-hero .lp-intro-blob #state-1,
.iih-hero .lp-intro-blob #state-2,
.iih-hero .lp-intro-blob #state-3 {
  opacity: 0;
  transition: opacity .1s;
}

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

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

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

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

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

/* Original #mehr: padding-bottom 78px (lp: 20px) */
.iih-mehr {
  padding-bottom: 78px;
}

/* #text_block-10883-61: Headline max. 750px */
.iih-mehr .lp-intro-block-headline {
  max-width: 750px;
}

/* #text_block-10885-61: Copy 22px / lh 1.5 / max. 650px */
.iih-mehr .lp-intro-block-copy {
  font-size: 22px;
  line-height: 1.5;
  max-width: 650px;
}

@media (max-width: 767px) {
  .iih-mehr {
    padding-top: 20px;
    padding-bottom: 26px;
  }

  .iih-mehr .lp-intro-block-headline {
    font-size: 30px;
  }

  .iih-mehr .lp-intro-block-copy {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------
   Gemeinsames: Spalten, Headline (M-Strong), Copy (Heading-Pre)
   ------------------------------------------------------------ */
.iih-server .section-inner,
.iih-storage .section-inner,
.iih-cloud .section-inner,
.iih-zukunft .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Oxygen ct-new-columns Default */
.iih-server-columns,
.iih-storage-columns,
.iih-icon-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* .M-Strong (universal.css) + #text_block-1089x-61: 37px, weiß, mb 20 */
.iih-headline {
  margin: 0 0 20px;
  font-size: 37px;
  line-height: 1.2;
  font-weight: 400;
  color: #fdfeff;
}

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

/* #headline-11105-61: mb 16px */
.iih-headline--storage {
  margin-bottom: 16px;
}

/* .Heading-Pre + IDs: 22px, fw300, weiß */
.iih-copy {
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 15px;
  color: #fdfeff;
}

/* #text_block-11108-61: mb 25px */
.iih-copy--storage {
  margin-bottom: 25px;
}

/* #text_block-10909-61 / -10941-61: 850px, lh 1.5;
   @1920: 750px; universal.css-Zusätze: @1600 700px / @1400 600px */
.iih-copy--wide {
  width: 850px;
  line-height: 1.5;
}

@media (max-width: 1920px) {
  .iih-copy--wide {
    width: 750px;
    max-width: 100%;
  }
}

@media only screen and (max-width: 1600px) {
  .iih-copy--wide {
    max-width: 700px;
  }
}

@media only screen and (max-width: 1400px) {
  .iih-copy--wide {
    max-width: 600px;
  }
}

@media (max-width: 1399px) {
  .iih-copy--wide {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .iih-headline {
    font-size: 30px;
    text-align: center;
    width: 100%;
  }

  .iih-copy {
    font-size: 20px;
    text-align: center;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   Sektion #serverloesungen (Bild rechts via row-reverse)
   ------------------------------------------------------------ */
.iih-server .section-inner {
  padding: 150px 50px;
}

/* #new_columns-10887-61 */
.iih-server-columns {
  flex-direction: row-reverse;
  z-index: 999;
  position: relative;
  max-width: 1820px;
}

/* #div_block-10888-61 (+ @1920 pl30 / @1399 pl15) */
.iih-server .iih-col-img {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  padding: 20px 0 20px 30px;
}

/* #image-10997-61 (.drop_shadow aus universal.css) */
.iih-server .iih-col-img img {
  width: 100%;
  max-width: 750px;
  border-radius: 15px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15);
}

/* #div_block-10890-61 */
.iih-server .iih-col-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 20px 50px 20px 0;
}

@media (max-width: 1399px) {
  .iih-server .iih-col-img {
    padding-left: 15px;
  }

  .iih-server .iih-col-img img {
    width: 90%;
  }
}

@media (max-width: 767px) {
  .iih-server .section-inner {
    padding: 30px 20px 15px;
  }

  .iih-server-columns {
    flex-direction: column-reverse;
  }

  .iih-server-columns > .iih-col-img,
  .iih-server-columns > .iih-col-text {
    width: 100% !important;
  }

  /* #div_block-10888-61 @767: Bildspalte ausgeblendet */
  .iih-server .iih-col-img {
    display: none;
  }
}

@media (max-width: 479px) {
  .iih-server .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .iih-server .iih-col-text {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ------------------------------------------------------------
   Sektion #storage (Bild links, Blob rechts via lp-blob-bg)
   ------------------------------------------------------------ */
.iih-storage {
  position: relative;
  display: block;
  text-align: right;
}

.iih-storage .section-inner {
  padding: 150px 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* #new_columns-11094-61 */
.iih-storage-columns {
  z-index: 5;
  position: relative;
}

/* #div_block-11095-61 (+ @1920 pr30 / @1399 pr15) */
.iih-storage .iih-col-img--storage {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  padding: 20px 30px 20px 0;
}

/* #image-11098-61 */
.iih-storage .iih-col-img--storage img {
  border-radius: 15px;
  width: 100%;
  max-width: 750px;
  object-fit: cover;
}

/* #div_block-11103-61 (pr0 Basis, + @1920 pl0) */
.iih-storage .iih-col-text--storage {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

/* #div_block-11104-61 */
.iih-storage-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 1399px) {
  .iih-storage .iih-col-img--storage {
    padding-right: 15px;
  }

  .iih-storage .iih-col-img--storage img {
    width: 90%;
  }

  .iih-storage .iih-col-text--storage {
    padding-top: 43px;
    text-align: left;
    align-items: center;
  }
}

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

  .iih-storage-columns {
    flex-direction: column;
  }

  .iih-storage-columns > .iih-col-img--storage,
  .iih-storage-columns > .iih-col-text--storage {
    width: 100% !important;
  }

  .iih-storage .iih-col-img--storage {
    display: none;
  }

  .iih-storage .iih-col-text--storage {
    align-items: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   Icon-Sektionen #cloud + "Zukunft" (Icon links, Text rechts)
   ------------------------------------------------------------ */

/* Icons: .primary-icon (universal.css) — 150px, st1 in Primärfarbe */
.iih-primary-icon {
  width: 150px;
  height: 150px;
}

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

/* Nur #cloud: Code-Block trägt .primary-icon → mobil 30px Abstand
   (beim Zukunft-Icon sitzt die Klasse am SVG im 150px-Block → kein Abstand) */
@media (max-width: 767px) {
  .iih-icon-col--cloud .iih-primary-icon {
    margin-bottom: 30px;
  }
}

/* #new_columns-10903-61 / -10935-61 */
.iih-icon-columns {
  z-index: 999;
  position: relative;
}

.iih-icon-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: center;
  padding: 20px;
}

.iih-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}

/* --- #cloud --- */
.iih-cloud .section-inner {
  padding-bottom: 0;
}

/* #div_block-10904-61 */
.iih-icon-col--cloud {
  width: 20%;
}

/* #div_block-10906-61 (+ @1399 pr0) */
.iih-text-col--cloud {
  width: 80%;
  padding-left: 50px;
  padding-bottom: 42px;
}

@media (max-width: 1399px) {
  .iih-cloud .section-inner {
    padding-left: 50px;
    padding-right: 50px;
  }

  .iih-icon-col--cloud {
    text-align: right;
    align-items: center;
  }

  .iih-text-col--cloud {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .iih-cloud .section-inner {
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .iih-icon-columns--cloud {
    flex-direction: column;
  }

  .iih-icon-columns--cloud > .iih-icon-col,
  .iih-icon-columns--cloud > .iih-text-col {
    width: 100% !important;
  }

  .iih-icon-col--cloud {
    text-align: right;
    align-items: center;
    padding-left: 0;
  }

  .iih-text-col--cloud {
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
  }
}

@media (max-width: 479px) {
  .iih-cloud .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Sektion "Gemeinsam mit uns in die Zukunft" (section-10934-61) --- */

/* #div_block-10936-61 */
.iih-icon-col--zukunft {
  width: 50%;
}

/* #div_block-10938-61 (padding-right:0 schon in der Basis) */
.iih-text-col--zukunft {
  width: 50%;
  padding-left: 50px;
  padding-right: 0;
}

/* #div_block-11154-61 (@1920: overflow hidden, pr22) */
@media (max-width: 1920px) {
  .iih-textwrap--zukunft {
    overflow: hidden;
    padding-right: 22px;
  }
}

@media (max-width: 1399px) {
  .iih-zukunft .section-inner {
    padding-left: 50px;
    padding-right: 50px;
  }

  .iih-icon-col--zukunft {
    width: 20%;
    text-align: right;
    align-items: center;
    padding-left: 0;
  }

  .iih-text-col--zukunft {
    width: 80%;
  }

  .iih-textwrap--zukunft {
    width: 100%;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .iih-zukunft .section-inner {
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
  }

  .iih-icon-columns--zukunft {
    flex-direction: column;
  }

  .iih-icon-columns--zukunft > .iih-icon-col,
  .iih-icon-columns--zukunft > .iih-text-col {
    width: 100% !important;
  }

  .iih-icon-col--zukunft {
    text-align: left;
    align-items: center;
  }

  .iih-text-col--zukunft {
    padding-left: 0;
    padding-top: 20px;
  }

  .iih-textwrap--zukunft {
    text-align: left;
    align-items: center;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   CTA-Anpassungen (Original 334.css statt Template 315)
   ------------------------------------------------------------ */

/* #div_block-3598-12: Box ohne vertikales Padding */
.iih-cta .lp-cta-box {
  padding-top: 0;
  padding-bottom: 0;
}

/* #headline-3600-12: ragt rechts über die Spalte */
.iih-cta-headline {
  margin-right: -91px;
}

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

/* #text_block-3603-12 @479: 20px (lp: 18px) */
@media (max-width: 479px) {
  .iih-cta .lp-cta-copy {
    font-size: 20px;
  }
}