/* ============================================================
   SEITE: IT-Flatrate (Page-ID 632) — Prefix: itf-
   Werte 1:1 aus Original-CSS (632.css + universal.css, Oxygen-IDs).
   Breakpoints wie Original: 1920 / 1399 / 767 / 479 px.
   Nutzt lp-Bausteine aus leistung-shared.css (lp-media, lp-iconrow,
   lp-blob-bg, lp-cta) — Abweichungen hier lokal überschrieben.
   ============================================================ */

/* ------------------------------------------------------------
   Sektionen: Innenabstände (Original section-Inner-Wraps)
   ------------------------------------------------------------ */
.itf-hero .section-inner,
.itf-vorteile .section-inner,
.itf-pakete .section-inner,
.itf-deep .section-inner,
.itf-cta .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Original .ct-span ist inline-block — Spans umbrechen als Einheit
   (sichtbar z.B. bei "Warum Leopold Netzwerke?" auf Mobil) */
.itf-slide-headline span,
.itf-intro-headline span,
.itf-vorteile-headline span,
.itf-benefit-title span,
.itf-pakete-headline span,
.itf-standard-headline span,
.itf-deep .lp-iconrow-headline span,
.itf-cta-headline span {
  display: inline-block;
}

/* Original #section-1797-12 */
.itf-vorteile {
  text-align: left;
}

.itf-vorteile .section-inner {
  padding-top: 170px;
  padding-bottom: 240px;
  align-items: center;
  gap: 30px;
}

/* Original #section-11111-632 */
.itf-pakete {
  z-index: 999;
  text-align: left;
}

.itf-pakete .section-inner {
  padding: 85px 50px 10px;
  align-items: center;
}

/* Original #section-11135-632 */
.itf-deep {
  position: relative;
  display: block;
}

.itf-deep .section-inner {
  padding: 10px 50px 89px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Original #section-11183-632 (CTA): nur 50px seitlich, Box ohne
   Innen-Padding oben/unten (anders als Pilot-CTA) */
.itf-cta .lp-cta-box {
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------
   Hero: Intro + Fade-Slider (Original div_block-10997 + slider-10998,
   Unslider: fade, keine Dots, Pfeile, kein Autoplay, nicht endlos)
   ------------------------------------------------------------ */
.itf-intro {
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

.itf-slider {
  width: 100%;
  height: 954px;
  position: relative;
}

/* Wie Original .unslider (Oxygen): relativ, seitliches Padding rückt
   die Slides ein; Höhe der UL setzt das JS auf die aktive Slide-Höhe
   (wie Unslider), daran hängen die Pfeil-Positionen. */
.itf-slider-container {
  position: relative;
  padding: 0 40px;
}

.itf-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.itf-slide-li {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 8;
  opacity: 0;
  transition: .5s ease;
}

.itf-slide-li.is-active {
  z-index: 10;
  opacity: 1;
}

/* Original .ct-slide */
.itf-slide {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Original new_columns-11000/12/26/40 */
.itf-slide-columns {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 0;
}

/* Original div_block-11001/13/27/41 (Textspalte) */
.itf-slide-col-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  padding: 300px 20px 20px;
}

/* Original div_block-11002/14/28/42 (Content) */
.itf-slide-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  position: relative;
  z-index: 10;
}

/* Original headline-5xl + .slider-content-headline + ID-Styles */
.itf-slide-headline {
  margin: 0 -350px 12px 0;
  font-weight: 400;
  color: #fdfeff;
  text-align: left;
  position: relative;
  bottom: 50px;
  opacity: 0;
  transition: 1s ease;
  transition-delay: .4s;
}

.itf-slide-headline--s1 {
  margin-right: -250px;
}

.itf-slide-headline span {
  color: #32b4a2;
}

.is-active .itf-slide-headline {
  opacity: 1;
  bottom: 0;
}

/* Original .slider-content-text + ID-Styles */
.itf-slide-text {
  font-size: 26px;
  color: #fdfeff;
  margin-bottom: 14px;
  text-align: left;
  margin-left: 60px;
  opacity: 0;
  position: relative;
  transition: 1s ease;
  transition-delay: .75s;
  min-width: 700px;
}

.itf-slide-text--s1 {
  font-style: normal;
}

.is-active .itf-slide-text {
  margin-left: 0;
  opacity: 1;
}

/* Original div_block-11007/21/35/49 (Bildspalte) */
.itf-slide-col-visual {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  padding: 20px;
}

/* Original div_block-11008/22/36/50 */
.itf-slide-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  margin-left: -150px;
}

/* Original code_block "waves": Slide 1 opacity .7, Rest .3 */
.itf-waves {
  width: 100%;
  max-width: 800px;
  opacity: .3;
}

.itf-waves--strong {
  opacity: .7;
}

.itf-waves svg {
  width: 100%;
}

/* Original .slider-content-image + ID-Styles */
.itf-slide-image {
  position: absolute;
  max-width: 755px;
  width: 100%;
  height: auto;
  top: 49.5%;
  transform: translateY(-50%);
  left: 100px;
  opacity: 0;
  transition: left 1.2s ease, opacity 1.5s ease;
  transition-delay: .25s;
}

.is-active .itf-slide-image {
  left: 20px;
  opacity: 1;
}

/* Pfeile (Original .unslider-arrow, unslider.css + universal.css) */
.itf-arrow {
  position: absolute;
  left: auto;
  right: calc(50% - 694px);
  top: 49%;
  margin-top: -16px;
  z-index: 998;
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 32px;
  overflow: hidden;
  text-indent: -999em;
  cursor: pointer;
  opacity: 1;
  background-color: var(--secondary-1000);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 7px 11px;
  transition: background .15s;
}

.itf-arrow:hover {
  background-color: var(--primary-1000);
}

.itf-arrow--prev {
  top: calc(50% + 50px);
  transform: rotate(-180deg);
}

/* Intro-Text unter dem Slider (Original new_columns-11057) */
.itf-intro-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  z-index: 5;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

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

.itf-intro-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  text-align: center;
}

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

.itf-intro-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  text-align: center;
  max-width: 1300px;
}

/* ------------------------------------------------------------
   Vorteile (Original section-1797-12, 4 Icon-Zeilen)
   ------------------------------------------------------------ */
.itf-vorteile-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 40px;
  text-align: center;
  z-index: 10;
}

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

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

/* Icon-Spalte: schmal (Zeile 1+3) bzw. breit (Zeile 2+4) */
.itf-benefit-icon {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: center;
  padding: 20px 0 20px 20px;
}

.itf-benefit--mid .itf-benefit-icon {
  width: 50%;
}

.itf-benefit-icon img {
  width: 150px;
  height: 150px;
}

/* Textspalte */
.itf-benefit-body {
  width: 80%;
  padding: 20px 20px 42px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.itf-benefit--mid .itf-benefit-body {
  width: 50%;
  padding: 20px 0 20px 50px;
}

.itf-benefit-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Original .M-Strong + ID-Styles */
.itf-benefit-title {
  font-size: 37px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 20px;
  color: #fdfeff;
}

.itf-benefit-title span {
  color: #223a4f;
}

/* Original .Heading-Pre + ID-Styles */
.itf-benefit-copy {
  font-weight: 300;
  margin-bottom: 15px;
  color: #fdfeff;
  line-height: 1.5;
  width: 850px;
  font-size: 22px;
}

/* ------------------------------------------------------------
   Pakete (Original section-11111 + 11135)
   ------------------------------------------------------------ */
.itf-pakete-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 40px;
  text-align: center;
  z-index: 10;
}

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

.itf-pakete-sub {
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  text-align: center;
  max-width: 1300px;
  margin-bottom: 40px;
}

/* Paket-Headlines: #111 wie Original (Oxygen-Headline-Default),
   kommt bereits aus .lp-media-headline / .lp-cta-headline */

/* Standard-Paket: bleibt bis 767 zweispaltig (anders als lp --img-right),
   Original new_columns-11136 (z-index 15) */
.itf-paket--standard {
  z-index: 15;
}

.itf-standard-headline {
  max-width: 560px;
}

/* Warum-Icon ist ein PNG (kein SVG wie im lp-Baustein) */
.itf-warum-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
}

/* CTA: Überhang rechts (Original headline-11187: margin-right -91px,
   ab 1399 aufgehoben); Farben (#111 + grüner Span) aus lp-cta-headline */
.itf-cta-headline {
  margin-right: -91px;
}

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

@media (max-width: 1920px) {
  .itf-intro {
    padding-top: 100px;
  }

  .itf-slide-columns--first {
    overflow: visible;
  }

  .itf-slide-col-text {
    text-align: right;
  }

  .itf-slide-content--s1 {
    max-width: 610px;
  }

  .itf-slide-content--tight {
    margin-right: -68px;
  }

  .itf-slide-col-visual {
    padding-right: 0;
    overflow: visible;
  }

  .itf-slide-visual {
    margin-right: -40px;
  }

  .itf-benefit--mid .itf-benefit-inner {
    overflow: hidden;
    padding-right: 22px;
  }

  .itf-benefit-copy {
    width: 750px;
  }

  .itf-benefit--mid .itf-benefit-copy {
    overflow: hidden;
    max-width: 100%;
  }
}

@media (max-width: 1399px) {
  .itf-slide-col-text {
    padding-top: 220px;
    text-align: right;
    align-items: flex-start;
    padding-left: 0;
  }

  .itf-slide-content--s1 {
    max-width: 700px;
  }

  .itf-slide-col-visual {
    padding-left: 0;
    text-align: center;
    align-items: flex-end;
    padding-right: 0;
  }

  .itf-slide-visual {
    margin-right: 0;
    width: 120%;
  }

  .itf-arrow {
    right: 10px;
  }

  .itf-intro-cols > .itf-intro-col {
    width: 100% !important;
  }

  .itf-benefit-icon {
    text-align: right;
    align-items: center;
  }

  .itf-benefit--mid .itf-benefit-icon {
    width: 20%;
    padding-left: 0;
  }

  .itf-benefit-body {
    padding-right: 0;
  }

  .itf-benefit--mid .itf-benefit-body {
    width: 80%;
  }

  .itf-benefit--mid .itf-benefit-inner {
    width: 100%;
    padding-right: 0;
  }

  .itf-benefit-copy {
    width: 100%;
  }

  /* Standard-Paket bleibt 50/50 (lp --img-right würde hier stapeln) */

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

@media (max-width: 767px) {
  .itf-slide-columns {
    margin-top: 150px;
  }

  .itf-slide-col-text {
    padding: 140px 0 20px;
    min-width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .itf-slide-content--s1 {
    max-width: 100%;
  }

  .itf-slide-headline {
    margin-right: 0;
    font-size: 54px;
  }

  .itf-slide-text {
    min-width: 100%;
    font-size: 18px;
  }

  .itf-slide-col-visual {
    position: absolute;
    min-width: 100%;
  }

  .itf-slide-visual {
    width: 400px;
    margin-right: -10px;
  }

  .itf-slide-visual--s1 {
    width: 65%;
  }

  .is-active .itf-slide-image {
    left: 0;
  }

  .itf-slider-container {
    padding: 0 20px;
  }

  .itf-intro-col {
    padding-left: 0;
    padding-right: 0;
  }

  .itf-intro-headline {
    font-size: 31px;
  }

  .itf-intro-copy {
    font-size: 20px;
  }

  .itf-vorteile-headline {
    font-size: 31px;
  }

  .itf-benefit {
    flex-direction: column;
  }

  .itf-benefit > .itf-benefit-icon,
  .itf-benefit > .itf-benefit-body {
    width: 100% !important;
  }

  .itf-benefit-icon {
    text-align: right;
    align-items: center;
    padding-left: 0;
  }

  .itf-benefit--mid .itf-benefit-icon {
    text-align: left;
  }

  .itf-benefit-body,
  .itf-benefit--mid .itf-benefit-body {
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
  }

  .itf-benefit--mid .itf-benefit-inner {
    text-align: left;
    align-items: center;
    margin-top: 0;
    padding-right: 0;
  }

  .itf-benefit-title {
    text-align: center;
    width: 100%;
    font-size: 30px;
  }

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

  .itf-pakete .section-inner {
    padding-right: 20px;
    padding-bottom: 29px;
    padding-left: 20px;
  }

  .itf-pakete-headline {
    font-size: 31px;
  }

  .itf-pakete-sub {
    font-size: 20px;
  }

  /* Basis-Paket: Bild bleibt mobil sichtbar mit 20px oben/unten,
     Textspalte rückt auf 8px (Original 11113/11115) */
  .itf-paket--basis .lp-media-col-img {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .itf-paket--basis .lp-media-col-text {
    padding-top: 8px;
  }

  .itf-paket--basis .lp-media-headline {
    font-size: 30px;
  }

  /* Standard-Paket: mobil Bild oben (column-reverse wie Original) */
  .itf-paket--standard {
    flex-direction: column-reverse;
    margin-bottom: 0;
  }

  .itf-paket--standard > .lp-media-col-text,
  .itf-paket--standard > .lp-media-col-img {
    width: 100% !important;
  }

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

@media (max-width: 479px) {
  .itf-intro {
    min-height: 1px;
  }

  .itf-slider {
    height: 500px;
  }

  .itf-slide-col-text {
    padding-right: 0;
  }

  .itf-slide-headline {
    font-size: 37px;
  }

  .itf-slide-visual,
  .itf-slide-visual--s1 {
    width: 65%;
  }

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

  .itf-cta .lp-cta-copy {
    font-size: 20px;
  }
}