/* ============================================================
   LEISTUNGS-SEITEN — GEMEINSAME BAUSTEINE (Prefix: lp-)
   Eigentümer: Pilot-Agent (page-it-sicherheit-und-backup).
   Folge-Agents: NUR NUTZEN, NICHT ÄNDERN. Fehlt etwas → im
   eigenen Seiten-CSS mit Seiten-Präfix ergänzen.

   Werte 1:1 aus Original-CSS (universal.css + 157.css/23.css,
   Oxygen-Element-IDs) und per getBoundingClientRect verifiziert.
   Breakpoints wie Original: 1920 / 1399 / 767 / 600 / 479 px.

   ------------------------------------------------------------
   BAUSTEINE + ERWARTETES MARKUP
   ------------------------------------------------------------

   1) SEITEN-HERO (Oxygen: Template 41 "Intro-Section-Subpage")
      <section class="section lp-hero linear-gradient has-blured-end">
        <div class="section-inner">
          <div class="lp-intro">
            <div class="lp-intro-columns">
              <div class="lp-intro-col-content">
                <div class="lp-intro-content">
                  <h1 class="headline-5xl lp-intro-headline"><span>…</span> …</h1>
                  <div class="cocco-narrow lp-intro-text">…</div>
                  <div class="lp-intro-btns">
                    <a class="btn-xl-primary btn-el-right cocco-narrow-semi" href="#mehr">Mehr zum Thema</a>
                    <a class="btn-xl-primary btn-el-right cocco-narrow-semi btn-outline" href="/kontakt">Rückruf anfordern</a>
                  </div>
                </div>
              </div>
              <div class="lp-intro-col-visual">
                <div class="lp-intro-visual">
                  <div class="lp-intro-blob">(Blob-SVG inline)</div>
                  <img class="lp-intro-image" …>   ← JS blendet per .show ein
                </div>
              </div>
            </div>
            <a class="lp-scroll-link" href="#mehr">
              <span class="lp-scroll-icon">(Pfeil-SVG inline)</span>
              <div class="cocco-narrow-light lp-scroll-text">Mehr Information</div>
            </a>
            [2) INTRO-BLOCK hier einfügen — liegt IM Hero-Section-inner]
          </div>… (Achtung: Intro-Block als Geschwister von .lp-intro-columns
                   innerhalb .lp-intro? NEIN → siehe unten: #mehr ist Geschwister
                   von .lp-intro, direkt im .section-inner)
        </div>
      </section>

   2) INTRO-BLOCK "#mehr" (Oxygen: Template 647 "intro-text" + Karten)
      Direkt nach </div> von .lp-intro, noch im .section-inner des Heros:
      <div id="mehr" class="lp-intro-block [lp-intro-block--center]">
        <div class="lp-intro-block-columns">
          <div class="lp-linkcards">                ← nur wenn ACF-Rows vorhanden
            <a class="lp-linkcard" href="…" style="background-image:url(…);[background-position:…]">
              <div class="lp-linkcard-title">Linktext</div>
              <div class="lp-linkcard-shade"></div>
              <img class="lp-linkcard-arrow" src="/wp-content/uploads/2024/02/arrow-right-1.png" alt="">
            </a> …
          </div>
          <div class="lp-intro-block-text">
            <div class="headline-xl lp-intro-block-headline">…<br><span>…</span></div>
            <div class="cocco-narrow lp-intro-block-copy">…</div>
            [optional weitere .lp-intro-block-copy]
          </div>
        </div>
      </div>
      Modifier --center: KEINE Karten (Repeater leer) → Textspalte 100 %,
      zentriert, Copy 22px/max 1300px (so rendert das Original z. B.
      Backup & Recovery). Ohne Modifier: Karten 40 % / Text 60 %, linksbündig.
      ACF: Repeater `unterseiten_auswahlen` → Sub `unterseite_hinzufugen`
      (`link_text`, `link_unterseite`). Hintergründe: 3er-Zyklus, siehe Pilot-PHP.

   3) TEXT-BILD-SEKTION "bild-links" (Oxygen: Template 650)
      Eigene Section, Bild links / Text rechts, H2 dunkel (M-Strong-Optik):
      <section class="section lp-media">
        <div class="section-inner">
          <div class="lp-media-columns [lp-media-columns--hide-img-m]">
            <div class="lp-media-col-img"><img src="…" alt="…"></div>
            <div class="lp-media-col-text">
              <div class="lp-media-text">
                <h2 class="lp-media-headline">… <span>…</span></h2>
                <div class="lp-media-copy">…</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      --hide-img-m: Bildspalte auf Mobil (≤767) ausgeblendet + H2 30px
      (Original-Variante div_block-10936-41). Ohne Modifier stapelt die
      Sektion mobil mit sichtbarem Bild oben (Variante Microsoft 365).
      Der Baustein kann auch OHNE eigene Section innerhalb von .lp-deep
      wiederholt werden (nur .lp-media-columns einsetzen).

   4) TEXT-BILD-SEKTION "bild-rechts" (Oxygen: Template 651)
      Innerhalb .lp-deep (oder eigener Section):
      <div class="lp-media-columns lp-media-columns--img-right">
        <div class="lp-media-col-text lp-media-col-text--wide">
          <div class="headline-xl lp-media-headline-light">… <span>…</span></div>
          <div class="lp-media-copy-light">…</div>
        </div>
        <div class="lp-media-col-img lp-media-col-img--shadow"><img …></div>
      </div>
      Stapelt schon ab ≤1399 (Original), mobil column-reverse.

   5) ICON-SEKTION "icon-links"/"icon-rechts" (Oxygen: 648/649)
      Zentrierter Block: Icon (150px) + H2 + Copy:
      <div class="lp-iconrow [lp-iconrow--gap-bottom]">
        <div class="lp-iconrow-inner">
          <div class="lp-iconrow-icon">(SVG inline)</div>
          <h2 class="headline-l lp-iconrow-headline">… <span>…</span></h2>
          <div class="lp-iconrow-copy">…</div>
        </div>
      </div>
      --gap-bottom: 147px Abstand nach unten (wenn direkt ein weiterer
      Baustein folgt; Original new_columns-10953-41).

   6) DEEP-SEKTION (Wrapper für 4+5, mit Blob-Deko + Blur):
      <section class="section lp-deep has-blured-end">
        <div class="section-inner">
          [bild-rechts]
          <div class="lp-blob-bg"><img src="/wp-content/uploads/2024/02/blob-complete-inner-waves.webp" alt=""></div>
          [icon-Sektionen / bild-links-Spalten …]
        </div>
      </section>

   7) CTA-SEKTION (Oxygen: Template 315 "CTA-Section", dunkle Box)
      <section class="section lp-cta has-blured-end">
        <div class="section-inner">
          <div class="lp-cta-box">
            <div class="lp-cta-content">
              <div class="lp-cta-inner">
                <h2 class="headline-xl lp-cta-headline">…<br><span>…</span></h2>
                <div class="body-l lp-cta-copy">…</div>
                <div class="lp-cta-btns">
                  <a class="btn-xl-primary cocco-narrow-semi phone-btn" href="/kontakt">Termin vereinbaren</a>
                  <div class="lp-cta-oder">oder</div>
                  <a class="btn-xl-primary btn-outline-green btn-outline cocco-narrow-semi email-btn" href="/kontakt">E-Mail schreiben</a>
                </div>
              </div>
            </div>
            <div class="lp-cta-visual">
              <img src="/wp-content/uploads/2024/04/signet-w-waves-1c.webp" alt="Leopold Netzwerke GmbH Logo">
            </div>
          </div>
        </div>
      </section>

   8) KONTAKTFORMULAR-SEKTION: auf keiner Leistungs-Seite vorhanden
      (kein FluentForm im gerenderten Original irgendeiner Leistungs-
      Seite). Falls eine Seite doch eines hat: FluentForms-Styling kommt
      global aus dem Original-universal.css; Baustein dann seitenlokal
      bauen (echo do_shortcode('[fluentform id="X"]')).

   9) BODY-WRAPPER (Original div_block-7346-12, klemmt Blur-Ausläufer):
      Alle Sektionen NACH dem Hero in <div class="lp-body">…</div> packen.

   Blog-Slider ("Insight Leopold"): KEIN lp-Baustein —
   get_template_part('template-parts/blog') wiederverwenden
   (CSS/JS blog.css/blog.js sind global geladen).
   ============================================================ */

/* ------------------------------------------------------------
   Allgemein
   ------------------------------------------------------------ */

/* Bilder tragen jetzt width/height-Attribute (CLS-Vermeidung).
   Damit sich die Optik dadurch um keinen Pixel ändert, bleibt die
   Höhe proportional — exakt das Rendering von vor den Attributen.
   :where() = Spezifität 0: jede echte CSS-Höhe gewinnt weiterhin. */
:where(img[width][height]) {
  height: auto;
}

.lp-body {
  overflow: hidden;
  width: 100%;
}

/* Original (oxygen-framework.css): h1-h6 ohne UA-Margins */
.lp-intro-headline,
.lp-media-headline,
.lp-iconrow-headline,
.lp-cta-headline {
  margin: 0;
}

.lp-hero .section-inner,
.lp-media .section-inner,
.lp-deep .section-inner,
.lp-cta .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   1) Seiten-Hero
   ------------------------------------------------------------ */
.lp-hero .section-inner {
  max-width: 100%;
  padding: 0;
}

.lp-intro {
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
}

.lp-intro-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding-top: 0;
}

.lp-intro-col-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  padding: 250px 20px 20px 50px;
}

.lp-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  position: relative;
  z-index: 10;
}

.lp-intro-headline {
  font-size: 100px;
  color: #32b4a2;
  margin-right: -360px;
  margin-bottom: 12px;
  text-align: left;
}

.lp-intro-headline span {
  color: #fdfeff;
}

.lp-intro-text {
  font-size: 26px;
  color: #fdfeff;
  margin-bottom: 14px;
}

.lp-intro-btns {
  display: flex;
  flex-direction: row;
  gap: 25px;
  text-align: left;
}

.lp-intro-btns .btn-xl-primary {
  text-transform: none;
  color: #fff;
  text-align: center;
}

.lp-intro-btns .btn-el-right:before {
  content: "";
  background: var(--btn-arrow-image);
  background-size: contain;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  position: absolute;
  transition: var(--global-transition);
}

.lp-intro-btns .btn-el-right:hover:before {
  right: 15px;
}

.lp-intro-col-visual {
  width: 50%;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: center;
  padding: 20px;
}

.lp-intro-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  margin-left: -150px;
}

.lp-intro-blob {
  width: 100%;
  max-width: 800px;
  opacity: .7;
}

.lp-intro-blob svg {
  width: 100%;
}

.lp-intro-image {
  position: absolute;
  max-width: 755px;
  width: 100%;
  top: 49.5%;
  transform: translateY(-50%);
  left: 20px;
  opacity: 0;
  transition: 1s ease;
}

.lp-intro-image.show {
  opacity: 1;
}

/* Scroll-Link "Mehr Information" */
.lp-scroll-link {
  position: absolute;
  left: 50px;
  bottom: 50px;
  z-index: 15;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  opacity: .8;
  text-align: left;
  text-decoration: none;
  transition: .5s;
}

.lp-scroll-icon {
  width: 40px;
  height: 40px;
  z-index: 1;
  display: block;
}

.lp-scroll-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-scroll-text {
  font-style: italic;
  color: #fdfeff;
}

/* ------------------------------------------------------------
   2) Intro-Block "#mehr" (+ Unterseiten-Linkkarten)
   ------------------------------------------------------------ */
.lp-intro-block {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 142px 50px 20px;
}

.lp-intro-block-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;
}

/* Unterseiten-Linkkarten (dynamisch aus ACF) */
.lp-linkcards {
  width: 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.lp-linkcard {
  width: 100%;
  height: 130px;
  padding: 30px;
  border-radius: 15px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}

.lp-linkcard-title {
  color: #fdfeff;
  position: relative;
  z-index: 3;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.lp-linkcard-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  background: rgb(35,37,39);
  background: linear-gradient(180deg, rgba(35,37,39,1) 0%, rgba(11,11,11,1) 50%);
  pointer-events: none;
}

.lp-linkcard-arrow {
  position: relative;
  z-index: 4;
  width: 20px;
}

/* Textspalte */
.lp-intro-block-text {
  width: 60%;
  padding: 20px 20px 20px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.lp-intro-block-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
}

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

.lp-intro-block-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
}

/* Variante ohne Karten (Original-Rendering der Unterseiten):
   volle Breite, zentriert, Copy 22px */
.lp-intro-block--center .lp-intro-block-text {
  width: 100%;
  align-items: center;
}

.lp-intro-block--center .lp-intro-block-headline {
  text-align: center;
}

.lp-intro-block--center .lp-intro-block-copy {
  font-size: 22px;
  text-align: center;
  max-width: 1300px;
}

/* ------------------------------------------------------------
   3+4) Text-Bild-Sektionen (bild-links / bild-rechts)
   ------------------------------------------------------------ */
.lp-media .section-inner {
  padding: 85px 50px;
}

.lp-media-columns {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.lp-media-col-img {
  width: 50%;
  padding: 20px 53px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

.lp-media-col-img img {
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.lp-media-col-img--shadow {
  padding-right: 0;
}

.lp-media-col-img--shadow img {
  box-shadow: 0px 20px 50px rgba(0,0,0,0.15);
}

.lp-media-col-text {
  width: 50%;
  padding: 20px 38px 20px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-media-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: #ffffff;
}

.lp-media-headline {
  font-size: 37px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 16px;
  color: #111;
}

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

.lp-media-copy {
  font-weight: 300;
  font-size: 22px;
  margin-bottom: 25px;
}

/* bild-rechts: Text links (breiter Abstand), Bild rechts mit Schatten */
.lp-media-columns--img-right {
  z-index: 15;
}

.lp-media-col-text--wide {
  padding: 20px 93px 20px 0;
  align-items: flex-start;
}

.lp-media-headline-light {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  font-size: 37px;
}

.lp-media-headline-light span {
  color: #223a4f;
}

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

/* ------------------------------------------------------------
   5) Icon-Sektion
   ------------------------------------------------------------ */
.lp-iconrow {
  margin-top: 179px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.lp-iconrow--gap-bottom {
  margin-bottom: 147px;
}

.lp-iconrow-inner {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.lp-iconrow-icon {
  margin-bottom: 30px;
}

.lp-iconrow-icon svg {
  width: 150px;
  height: 150px;
}

.lp-iconrow-headline {
  font-size: 37px;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.2;
}

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

.lp-iconrow-copy {
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  max-width: 1295px;
  font-size: 22px;
}

/* ------------------------------------------------------------
   6) Deep-Sektion + Blob-Deko
   ------------------------------------------------------------ */
.lp-deep {
  position: relative;
  display: block;
}

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

.lp-blob-bg {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lp-blob-bg img {
  position: relative;
  z-index: 5;
  width: 538px;
  height: 1071px;
  max-width: 100%;
  pointer-events: none;
}

/* Original .has-blured-background:after (fehlt in base.css) */
.lp-blob-bg:after {
  /* Statischer Gradient-Ersatz für die Original-Ellipse (650% x 80%, #004270,
     filter: blur(350px)) — iOS-Safari hängt bei Laufzeit-Blur auf großen Flächen.
     Box = Ellipse + 2×3σ (σ = 350px). Vertikalprofil als Hintergrund-Gradient,
     Horizontalprofil als Maske (Produkt ≈ 2D-Gauß-Faltung, Fehler < 0.04 Alpha). */
  content: "";
  width: calc(650% + 2100px);
  height: calc(80% + 2100px);
  position: absolute;
  top: 50%;
  right: calc(-300% - 1050px);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,66,112,0) 0%,
    rgba(0,66,112,0.006) 6.03%,
    rgba(0,66,112,0.013) 9.42%,
    rgba(0,66,112,0.026) 12.8%,
    rgba(0,66,112,0.049) 16.18%,
    rgba(0,66,112,0.085) 19.56%,
    rgba(0,66,112,0.138) 22.94%,
    rgba(0,66,112,0.211) 26.33%,
    rgba(0,66,112,0.301) 29.71%,
    rgba(0,66,112,0.405) 33.09%,
    rgba(0,66,112,0.513) 36.47%,
    rgba(0,66,112,0.614) 39.85%,
    rgba(0,66,112,0.696) 43.24%,
    rgba(0,66,112,0.75) 46.62%,
    rgba(0,66,112,0.769) 50%,
    rgba(0,66,112,0.75) 53.38%,
    rgba(0,66,112,0.696) 56.76%,
    rgba(0,66,112,0.614) 60.15%,
    rgba(0,66,112,0.513) 63.53%,
    rgba(0,66,112,0.405) 66.91%,
    rgba(0,66,112,0.301) 70.29%,
    rgba(0,66,112,0.211) 73.67%,
    rgba(0,66,112,0.138) 77.06%,
    rgba(0,66,112,0.085) 80.44%,
    rgba(0,66,112,0.049) 83.82%,
    rgba(0,66,112,0.026) 87.2%,
    rgba(0,66,112,0.013) 90.58%,
    rgba(0,66,112,0.006) 93.97%,
    rgba(0,66,112,0) 100%);
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.004) 4.44%,
    rgba(0,0,0,0.013) 7.12%,
    rgba(0,0,0,0.034) 9.8%,
    rgba(0,0,0,0.075) 12.48%,
    rgba(0,0,0,0.145) 15.16%,
    rgba(0,0,0,0.247) 17.84%,
    rgba(0,0,0,0.372) 20.52%,
    rgba(0,0,0,0.505) 23.2%,
    rgba(0,0,0,0.631) 25.88%,
    rgba(0,0,0,0.737) 28.56%,
    rgba(0,0,0,0.819) 31.24%,
    rgba(0,0,0,0.879) 33.92%,
    rgba(0,0,0,0.923) 36.6%,
    rgba(0,0,0,0.954) 39.28%,
    rgba(0,0,0,0.975) 41.96%,
    rgba(0,0,0,0.989) 44.64%,
    rgba(0,0,0,0.997) 47.32%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0.997) 52.68%,
    rgba(0,0,0,0.989) 55.36%,
    rgba(0,0,0,0.975) 58.04%,
    rgba(0,0,0,0.954) 60.72%,
    rgba(0,0,0,0.923) 63.4%,
    rgba(0,0,0,0.879) 66.08%,
    rgba(0,0,0,0.819) 68.76%,
    rgba(0,0,0,0.737) 71.44%,
    rgba(0,0,0,0.631) 74.12%,
    rgba(0,0,0,0.505) 76.8%,
    rgba(0,0,0,0.372) 79.48%,
    rgba(0,0,0,0.247) 82.16%,
    rgba(0,0,0,0.145) 84.84%,
    rgba(0,0,0,0.075) 87.52%,
    rgba(0,0,0,0.034) 90.2%,
    rgba(0,0,0,0.013) 92.88%,
    rgba(0,0,0,0.004) 95.56%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.004) 4.44%,
    rgba(0,0,0,0.013) 7.12%,
    rgba(0,0,0,0.034) 9.8%,
    rgba(0,0,0,0.075) 12.48%,
    rgba(0,0,0,0.145) 15.16%,
    rgba(0,0,0,0.247) 17.84%,
    rgba(0,0,0,0.372) 20.52%,
    rgba(0,0,0,0.505) 23.2%,
    rgba(0,0,0,0.631) 25.88%,
    rgba(0,0,0,0.737) 28.56%,
    rgba(0,0,0,0.819) 31.24%,
    rgba(0,0,0,0.879) 33.92%,
    rgba(0,0,0,0.923) 36.6%,
    rgba(0,0,0,0.954) 39.28%,
    rgba(0,0,0,0.975) 41.96%,
    rgba(0,0,0,0.989) 44.64%,
    rgba(0,0,0,0.997) 47.32%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0.997) 52.68%,
    rgba(0,0,0,0.989) 55.36%,
    rgba(0,0,0,0.975) 58.04%,
    rgba(0,0,0,0.954) 60.72%,
    rgba(0,0,0,0.923) 63.4%,
    rgba(0,0,0,0.879) 66.08%,
    rgba(0,0,0,0.819) 68.76%,
    rgba(0,0,0,0.737) 71.44%,
    rgba(0,0,0,0.631) 74.12%,
    rgba(0,0,0,0.505) 76.8%,
    rgba(0,0,0,0.372) 79.48%,
    rgba(0,0,0,0.247) 82.16%,
    rgba(0,0,0,0.145) 84.84%,
    rgba(0,0,0,0.075) 87.52%,
    rgba(0,0,0,0.034) 90.2%,
    rgba(0,0,0,0.013) 92.88%,
    rgba(0,0,0,0.004) 95.56%,
    rgba(0,0,0,0) 100%);
}

/* ------------------------------------------------------------
   7) CTA-Sektion
   ------------------------------------------------------------ */
.lp-cta .section-inner {
  padding-left: 50px;
  padding-right: 50px;
}

.lp-cta-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  position: relative;
  z-index: 6;
  border-radius: 15px;
  background-color: #223a4f;
  padding-top: 50px;
  padding-bottom: 50px;
}

.lp-cta-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  padding-left: 100px;
}

.lp-cta-inner {
  max-width: 650px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: 35px;
  padding-bottom: 35px;
  color: #ffffff;
}

.lp-cta-headline {
  margin-bottom: 6px;
  font-size: 50px;
  color: #111;
}

.lp-cta-headline span {
  color: #32b4a2;
}

.lp-cta-copy {
  font-weight: 300;
  margin-bottom: 22px;
  font-size: 22px;
  color: #fdfeff;
  width: 90%;
}

.lp-cta-btns {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: center;
  margin-top: 30px;
  text-align: left;
}

.lp-cta-btns .btn-xl-primary {
  margin-top: 0;
  text-transform: none;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.lp-cta-btns .btn-outline-green {
  color: var(--secondary-1000);
}

.lp-cta-oder {
  color: #32b4a2;
  font-size: 16px;
}

.lp-cta-btns .email-btn {
  padding-left: 45px;
}

.lp-cta-btns .email-btn:before {
  content: "";
  background: var(--btn-mail-image);
  background-size: contain;
  width: 20px;
  height: 20px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  transition: var(--global-transition);
}

.lp-cta-btns .email-btn:hover:before {
  background: var(--btn-mail-image-invert);
  background-size: contain;
}

.lp-cta-visual {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}

.lp-cta-visual img {
  width: 100%;
  object-fit: contain;
  height: 800px;
  margin: -175px -110px -200px 0;
}

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

@media (max-width: 1920px) {
  .lp-media-col-img {
    padding-right: 30px;
  }

  .lp-media-col-img--shadow {
    padding-right: 0;
  }

  .lp-media-col-text {
    padding-left: 0;
  }

  .lp-cta-visual img {
    margin-top: -200px;
    margin-bottom: -170px;
  }
}

@media (max-width: 1399px) {
  .lp-intro-col-content {
    padding-right: 0;
    text-align: right;
    align-items: flex-start;
    padding-top: 200px;
  }

  .lp-intro-content {
    margin-right: -200px;
  }

  .lp-intro-headline {
    font-size: 65px;
    text-align: left;
  }

  .lp-intro-text {
    text-align: left;
  }

  .lp-intro-visual {
    margin-left: 0;
  }

  /* Spalten stapeln (Original: new_columns > .ct-div-block 100% !important) */
  .lp-intro-block-columns > .lp-linkcards,
  .lp-intro-block-columns > .lp-intro-block-text,
  .lp-media-columns--img-right > .lp-media-col-text,
  .lp-media-columns--img-right > .lp-media-col-img {
    width: 100% !important;
  }

  .lp-media-col-img {
    padding-right: 15px;
  }

  .lp-media-col-img img {
    width: 90%;
  }

  .lp-media-col-img--shadow {
    padding-right: 0;
  }

  .lp-media-col-img--shadow img {
    width: 100%;
  }

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

  .lp-cta-content {
    width: 100%;
    padding: 40px;
  }

  .lp-cta-inner {
    padding-top: 0;
    padding-bottom: 0;
    z-index: 3;
    position: relative;
  }

  .lp-cta-headline {
    font-size: 40px;
  }

  .lp-cta-copy {
    width: 80%;
  }

  .lp-cta-btns .btn-xl-primary {
    font-size: 14px;
  }

  .lp-cta-oder {
    font-size: 14px;
  }

  .lp-cta-visual {
    position: absolute;
    width: 90%;
    margin-left: 240px;
    margin-top: -200px;
    margin-bottom: -200px;
  }

  .lp-cta-visual img {
    margin-right: 0;
    margin-bottom: -200px;
    max-width: 60%;
    opacity: .4;
    margin-top: -200px;
    height: auto;
  }
}

@media (max-width: 767px) {
  .lp-intro {
    align-items: flex-start;
    padding-top: 120px;
  }

  .lp-intro-columns {
    padding-top: 25px;
    flex-direction: column-reverse;
    display: flex;
  }

  .lp-intro-col-content {
    min-width: 100%;
    padding: 8px 20px 20px;
    text-align: left;
    align-items: center;
  }

  .lp-intro-content {
    width: 100%;
    position: relative;
    margin-right: 0;
    margin-top: -100px;
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: center;
  }

  .lp-intro-headline {
    font-size: 55px;
    margin-right: 0;
    text-align: center;
  }

  .lp-intro-text {
    font-size: 20px;
    text-align: center;
  }

  .lp-intro-btns {
    flex-direction: column;
    gap: 0;
  }

  .lp-intro-btns .btn-xl-primary {
    min-width: 236px;
  }

  .lp-intro-col-visual {
    z-index: 1;
    min-width: 100%;
    text-align: right;
    align-items: center;
  }

  .lp-intro-visual {
    max-width: 80%;
    margin-right: -20px;
  }

  .lp-intro-image {
    left: 0;
  }

  .lp-scroll-link {
    right: 50px;
    left: auto;
  }

  .lp-intro-block {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
  }

  .lp-intro-block-text {
    padding-left: 0;
    padding-right: 0;
  }

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

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

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

  .lp-media .section-inner {
    padding: 85px 20px 29px;
  }

  /* Spalten stapeln */
  .lp-media-columns {
    flex-direction: column;
  }

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

  .lp-media-columns--img-right {
    flex-direction: column-reverse;
    margin-bottom: 0;
  }

  .lp-media-columns--hide-img-m > .lp-media-col-img {
    display: none;
  }

  .lp-media-col-img {
    padding: 0;
  }

  /* Original: Bildspalte mit Schatten (10839) behält 20px oben/unten */
  .lp-media-col-img--shadow {
    padding: 20px 0;
  }

  .lp-media-col-img img {
    display: flex;
    width: 100%;
  }

  .lp-media-col-text {
    align-items: center;
    text-align: center;
    padding-right: 0;
  }

  /* Original: nur die Variante mit verstecktem Bild (10938) rückt auf 8px */
  .lp-media-columns--hide-img-m .lp-media-col-text {
    padding-top: 8px;
  }

  .lp-media-col-text--wide {
    padding-top: 20px;
    text-align: left;
    align-items: center;
  }

  .lp-media-text {
    text-align: left;
    align-items: center;
  }

  .lp-media-headline {
    font-size: 31px;
    text-align: center;
  }

  .lp-media-columns--hide-img-m .lp-media-headline {
    font-size: 30px;
  }

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

  .lp-media-headline-light {
    font-size: 31px;
    text-align: center;
  }

  .lp-media-copy-light {
    text-align: center;
    font-size: 20px;
  }

  .lp-iconrow {
    margin-top: 50px;
  }

  .lp-iconrow--gap-bottom {
    margin-bottom: 50px;
  }

  .lp-iconrow-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .lp-iconrow-icon {
    margin-bottom: 0;
  }

  .lp-iconrow-icon svg {
    margin-bottom: 30px;
  }

  .lp-iconrow-headline {
    font-size: 31px;
    text-align: center;
  }

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

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

  .lp-blob-bg img {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lp-cta .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lp-cta-box {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lp-cta-content {
    padding-left: 25px;
    padding-right: 25px;
  }

  .lp-cta-headline {
    width: 100%;
    text-align: center;
    font-size: 30px;
  }

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

  .lp-cta-btns {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    text-align: center;
  }

  .lp-cta-visual {
    display: none;
  }
}

/* Original universal.css: @600px überschreibt die Intro-Headline hart */
@media only screen and (max-width: 600px) {
  .lp-intro-headline {
    font-size: 35px !important;
  }
}

@media (max-width: 479px) {
  .lp-intro {
    min-height: 1px;
    flex-direction: row;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 70px;
  }

  .lp-intro-columns {
    position: relative;
    padding-top: 0;
    flex-direction: column-reverse;
  }

  .lp-intro-col-content {
    padding-left: 20px;
    padding-top: 0;
  }

  .lp-intro-content {
    margin-right: 0;
    min-width: 100%;
    width: 100%;
    padding-right: 0;
    position: relative;
  }

  .lp-intro-text {
    margin-right: 0;
    font-size: 18px;
  }

  .lp-intro-col-visual {
    text-align: center;
    align-items: center;
  }

  .lp-intro-visual {
    max-width: 80%;
    margin-right: 0;
  }

  .lp-scroll-link {
    display: none;
  }

  .lp-blob-bg img {
    margin-bottom: 1px;
  }

  .lp-cta-copy {
    font-size: 18px;
    margin-bottom: 0;
  }
}

@media only screen and (max-height: 780px) {
  .lp-scroll-link {
    display: none;
  }
}