/* ============================================================
   SOFTWARE-SEITEN — GEMEINSAME BAUSTEINE (Prefix: sw-)
   Eigentümer: Agent CRM/ERP/HR (page-crm-software).
   Diese Datei ist zugleich das Seiten-CSS von /crm-software/ UND
   das gemeinsame Skelett der neuen Software-Seiten (Juli/Aug 2026):
   /crm-software/ (841), /erp-software/ (843), /hr-software/ (845),
   /digitaler-produktzwilling/ (847), /ecm-software/ (849).
   Folge-Seiten laden diese Datei als Dependency (Handle
   'leopold-sw-shared', Muster in page-erp-software.php) und
   ergänzen NUR seitenlokale Overrides im eigenen Seiten-CSS.
   NICHT ÄNDERN außer durch den Eigentümer.

   Quelle der Werte: Oxygen-Dynamik-CSS der Live-Seite
   (?post_id=841&xlink=css — die Seiten laden KEIN 841.css!)
   + universal.css-Klassendefaults; per getBoundingClientRect
   auf 8081 verifiziert. Layout = Kopie der Templates 63+155
   (wie /informationssicherheit-backup/, dort Prefix sz-) plus
   zwei neue Bausteine (7: Zielgruppen, 8: Partner-Abschluss).
   Breakpoints: 1399 / 767 / 479 px.

   ------------------------------------------------------------
   BAUSTEINE + ERWARTETES MARKUP
   (Hero + CTA-Box kommen aus leistung-shared.css, Prefix lp- —
   nur nutzen, nicht ändern!)
   ------------------------------------------------------------

   1) HERO: lp-Baustein (siehe leistung-shared.css Kopf, Punkt 1),
      zweiter Button mit btn-outline-green.

   2) INTRO-BLOCK "#mehr" (im Hero-section-inner, nach .lp-intro):
      <div id="mehr" class="sw-mehr">
        <div class="sw-mehr-columns">
          <div class="sw-mehr-col">
            <div class="headline-xl sw-mehr-headline">… <br><span>…</span></div>
            <div class="cocco-narrow sw-mehr-copy">…</div>
          </div>
        </div>
      </div>

   3) BILD-LINKS-ZEILE (eigene Section, direkt nach dem Hero):
      <section class="section sw-row1"><div class="section-inner">
        <div class="sw-row1-columns">
          <div class="sw-row1-col-img"><img class="border-radius-global" …></div>
          <div class="sw-row1-col-text">
            <div class="sw-strong sw-strong--dark">… <br><span>…</span> …</div>
            <div class="cocco-narrow sw-copy">…</div>
          </div>
        </div>
      </div></section>

   4) DEEP-SECTION (Text/Bild-Zeile + fünf Icon-Zeilen + Blob):
      <section class="section sw-deep"><div class="section-inner">
        <div class="sw-row2-columns">
          <div class="sw-row2-col-text">
            <div class="sw-strong sw-strong--light">… <br><span>…</span></div>
            <div class="cocco-narrow sw-copy">…</div>
          </div>
          <div class="sw-row2-col-img"><img class="border-radius-global" …></div>
        </div>
        … fünf Icon-Zeilen (5) …
        <div class="lp-blob-bg"><img src="/wp-content/uploads/2024/02/blob-complete-inner-waves.webp" alt=""></div>
      </div></section>

   5) ICON-ZEILEN (a/c/e = Icon links + Spacer rechts,
      b/d = Spacer links + Icon-Block rechts):
      <div class="sw-iconrow sw-iconrow--a">
        <div class="sw-iconrow-main">
          <div class="sw-icon sw-icon--a">(SVG 150x150 inline)</div>
          <div class="sw-iconrow-body">
            <div class="headline-xl sw-icon-headline [sw-icon-headline--max]"><span>…</span> …</div>
            <div class="cocco-narrow sw-icon-copy">…</div>
          </div>
        </div>
        <div class="sw-iconrow-spacer"></div>
      </div>
      <div class="sw-iconrow sw-iconrow--b">
        <div class="sw-iconrow-spacer sw-iconrow-spacer--pad"></div>
        <div class="sw-iconrow-main sw-iconrow-main--right">… wie oben, Copy mit
          sw-icon-copy--mb14 …</div>
      </div>

   6) CTA: lp-Baustein (leistung-shared.css Punkt 7) mit Section-Klasse
      "section lp-cta sw-cta has-blured-end"; Headline-Span wird grün.

   7) ZIELGRUPPEN-BLOCK (NEU; im CTA-section-inner NACH .lp-cta-box):
      <div class="sw-audience">
        <div class="sw-audience-columns">
          <div class="sw-audience-col">
            <div class="sw-audience-col-inner">
              <div class="headline-xl sw-audience-headline">Für …<br></div>
              <div class="cocco-narrow sw-audience-copy">…</div>
            </div>
          </div>
          × 3
        </div>
      </div>

   8) PARTNER-ABSCHLUSS-SECTION (NEU; nach dem CTA, vor dem Blog-Slider;
      Bild ragt per Negativ-Margin oben/unten aus der Section):
      <section class="section sw-partner has-blured-end"><div class="section-inner">
        <div class="sw-partner-columns">
          <div class="sw-partner-col-img">
            <img class="border-radius-global drop_shadow" src="…" alt="…">
          </div>
          <div class="sw-partner-col-text">
            <h2 class="headline-xl sw-partner-headline">…<span> …</span> </h2>
            <div class="cocco-narrow sw-partner-copy">…</div>
          </div>
        </div>
      </div></section>

   Danach: <?php get_template_part('template-parts/blog'); ?>
   ============================================================ */

/* ------------------------------------------------------------
   2) Intro-Block "#mehr" (Template 63, .first-section)
   ------------------------------------------------------------ */
.sw-mehr {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 142px 50px 20px;
}

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

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

.sw-mehr-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  font-size: 54px;
  text-align: center;
  /* Original hat hyphens:auto — mobil bricht "Informationssicher-heit" */
  hyphens: auto;
}

.sw-mehr-headline span {
  color: #223a4f;
  display: inline-block;
}

.sw-mehr-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  max-width: 1295px;
  text-align: center;
}

/* ------------------------------------------------------------
   3) Bild-links-Zeile (Template 63, section-10882)
   ------------------------------------------------------------ */
.sw-row1 .section-inner {
  padding: 85px 50px 0;
}

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

.sw-row1-col-img {
  width: 50%;
  padding: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.sw-row1-col-img img,
.sw-row2-col-img img {
  width: 100%;
}

.sw-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) */
.sw-strong {
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: 37px;
  font-weight: 400;
}

.sw-strong span {
  display: inline-block;
}

.sw-strong--dark {
  color: #223a4f;
}

.sw-strong--dark span {
  color: #fdfeff;
}

.sw-strong--light {
  color: #fdfeff;
  max-width: 650px;
}

.sw-strong--light span {
  color: #223a4f;
}

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

/* ------------------------------------------------------------
   4) Deep-Section (Template 155, section-11103)
   ------------------------------------------------------------ */
.sw-deep {
  position: relative;
  display: block;
}

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

/* Text links, Bild rechts */
.sw-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;
}

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

.sw-row2-col-img {
  width: 50%;
  padding: 20px 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

/* ------------------------------------------------------------
   5) Icon-Zeilen
   ------------------------------------------------------------ */
.sw-iconrow {
  position: relative;
  z-index: 15;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.sw-iconrow-main {
  width: 50%;
  padding: 20px 20px 20px 0;
  text-align: left;
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.sw-iconrow-main--right {
  padding: 20px;
  text-align: center;
  align-items: flex-start;
  justify-content: center;
}

.sw-iconrow-spacer {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sw-iconrow-spacer--pad {
  padding-left: 42px;
  align-items: flex-start;
  justify-content: flex-start;
}

.sw-icon {
  width: 150px;
  height: 150px;
}

.sw-icon > svg {
  width: 150px;
  height: 150px;
}

.sw-iconrow-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.sw-icon-headline {
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: 31px;
  color: #223a4f;
}

.sw-icon-headline--max {
  max-width: 650px;
}

.sw-icon-headline span {
  display: inline-block;
  color: #fdfeff;
}

.sw-icon-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

.sw-icon-copy--mb14 {
  margin-bottom: 14px;
}

/* ------------------------------------------------------------
   6) CTA-Overrides (Template 155): Headline-Span grün
   ------------------------------------------------------------ */
.sw-cta .lp-cta-headline {
  margin-right: -91px;
}

.sw-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) {
  .sw-cta .lp-cta-copy {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------
   7) Zielgruppen-Block (NEU, div_block-11267-155:
      3 Spalten im CTA-section-inner nach der CTA-Box)
   ------------------------------------------------------------ */
.sw-audience {
  width: 100%;
  margin-top: 150px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sw-audience-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.sw-audience-col {
  width: 33.33%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

.sw-audience-col-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sw-audience-headline {
  line-height: 1.2;
  color: #223a4f;
  margin-bottom: 20px;
  max-width: 650px;
  font-size: 31px;
}

.sw-audience-copy {
  margin-bottom: 15px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
}

/* ------------------------------------------------------------
   8) Partner-Abschluss-Section (NEU, section-11268-155:
      Bild links, Text rechts, Bild ragt per Negativ-Margin raus)
   ------------------------------------------------------------ */
.sw-partner .section-inner {
  padding-top: 459px;
  padding-bottom: 150px;
}

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

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

.sw-partner-col-img img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}

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

.sw-partner-headline {
  font-size: 37px;
  line-height: 1.2;
  color: #ffffff;
  max-width: 664px;
  /* h2: Browser-Default-margin-top explizit nullen (Original: margin 0) */
  margin: 0 0 29px;
}

.sw-partner-headline span {
  color: #004270;
  display: inline-block;
}

.sw-partner-copy {
  color: #ffffff;
  font-size: 22px;
  max-width: 900px;
  text-align: left;
}

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

@media (max-width: 1399px) {
  .sw-mehr-columns {
    flex-direction: column;
  }

  .sw-mehr-columns > .sw-mehr-col,
  .sw-row1-columns > .sw-row1-col-img,
  .sw-row1-columns > .sw-row1-col-text,
  .sw-row2-columns > .sw-row2-col-text,
  .sw-row2-columns > .sw-row2-col-img,
  .sw-iconrow > .sw-iconrow-main,
  .sw-iconrow > .sw-iconrow-spacer,
  .sw-audience-columns > .sw-audience-col,
  .sw-partner-columns > .sw-partner-col-img,
  .sw-partner-columns > .sw-partner-col-text {
    width: 100% !important;
  }

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

  .sw-partner .section-inner {
    padding-bottom: 0;
  }

  .sw-partner-columns {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .sw-mehr {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sw-mehr-col {
    padding-left: 0;
    padding-right: 0;
  }

  .sw-mehr-headline {
    font-size: 31px;
  }

  .sw-mehr-copy {
    font-size: 20px;
  }

  .sw-row1 .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sw-row1-col-img {
    padding-top: 0;
    padding-right: 0;
  }

  .sw-row1-col-text {
    padding-left: 0;
    text-align: left;
    align-items: center;
  }

  .sw-strong {
    font-size: 31px;
    /* universal.css .M-Strong: mobil zentriert (alle Varianten) */
    text-align: center;
  }

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

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

  .sw-row2-columns {
    flex-direction: column-reverse;
    margin-bottom: 127px;
  }

  .sw-row2-col-text {
    padding-right: 0;
  }

  .sw-row2-col-img {
    padding-left: 0;
  }

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

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

  .sw-iconrow--a .sw-iconrow-main {
    margin-bottom: 53px;
  }

  .sw-iconrow--b .sw-iconrow-main {
    margin-bottom: 65px;
  }

  .sw-iconrow--c .sw-iconrow-main {
    margin-bottom: 75px;
    /* Original 11122-155 behaelt mobil padding-right 20px */
    padding-right: 20px;
  }

  .sw-iconrow--d .sw-iconrow-main {
    margin-bottom: 60px;
  }

  .sw-iconrow--e .sw-iconrow-main {
    margin-bottom: 0;
    padding-bottom: 0;
  }

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

  .sw-icon {
    margin-bottom: 30px;
  }

  .sw-icon--a {
    margin-left: 10px;
  }

  .sw-iconrow-body {
    /* Original @767: Icon-Textspalten zentrieren ihre Kinder */
    align-items: center;
  }

  .sw-icon-headline {
    text-align: center;
  }

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

  .sw-iconrow--a .sw-icon-copy {
    margin-bottom: 0;
  }

  .sw-audience-col-inner {
    text-align: left;
    align-items: center;
  }

  .sw-audience-headline {
    text-align: center;
  }

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

  .sw-partner-col-img,
  .sw-partner-col-text {
    padding-left: 0;
    padding-right: 0;
  }

  .sw-partner-headline {
    font-size: 31px;
    text-align: center;
  }

  .sw-partner-copy {
    font-size: 20px;
  }
}