/*
 * redesign-projektplanung-umsetzung.css
 * ==================================================================
 * Full-page redesign of /de/projektplanung-umsetzung ("Projekte
 * abwickeln", page-id 88793) to Figma JTL-Website-Modules node
 * 2253:16612 (teRt2FXM9JffFSebtSTocH).
 *
 * Built section-by-section. Page-scoped to body.page-id-88793 so nothing
 * leaks. Injected DOM (hero image/badge, arrows, …) is added by
 * redesign-projektplanung-umsetzung.js; assets live in
 * overrides/projektplanung-assets/. Enqueued from includes/general.php.
 *
 * Design tokens (from get_design_context):
 *   --jtl-light-sand #eeeee7   section cream bg
 *   --jtl-dark-blue  #0b1b45   headings / body
 *   --jtl-tech-blue  #2722f8   overlines
 *   --jtl-orange     #fb581f   CTAs / badge
 *   Overline  Inter 600 18/24 +0.9px uppercase
 *   H1        Kurdis Wide Bold 40/56
 * ==================================================================
 */

/* Drop the Bootstrap .container side padding across the page content so the
   redesign sections run edge-to-edge inside their (widened) max-widths. The
   hero keeps its own clamp() padding via a more specific rule below. */
body.page-id-88793 main .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ================= SECTION 1 — HERO (Product-Header 2253:16613) ================= */

/* Kill the legacy full-bleed background photo; go cream + 2-col.
   Pull the section up behind the transparent, scroll-away header (132px) +
   breadcrumb (46px) so the cream covers the whole page head and the nav pill
   floats over the hero (Figma). Extra top padding re-clears the nav. */
body.page-id-88793 section.projekt-redesign-hero {
  background: #eeeee7 !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
  margin-top: -178px !important;
  padding: 206px 0 80px !important;
}
/* Keep the breadcrumb painted above the pulled-up cream, dark on the sand bg. */
body.page-id-88793 #nav-breadcrumb {
  position: relative !important;
  z-index: 2 !important;
}
body.page-id-88793 #nav-breadcrumb,
body.page-id-88793 #nav-breadcrumb a,
body.page-id-88793 #nav-breadcrumb span,
body.page-id-88793 #nav-breadcrumb li {
  color: #0b1b45 !important;
}

/* Stretch the hero wider than the boxed Bootstrap .container — text pushes
   toward the left edge, image bleeds toward the right. */
body.page-id-88793 section.projekt-redesign-hero > .container {
  position: relative;
  z-index: 2;
  max-width: 1600px !important;
  padding-left: clamp(24px, 4vw, 64px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
}

/* Text column: left, capped at the Figma 640px, TOP-aligned (just under the
   breadcrumb) — overrides the legacy .mt-auto/.mb-auto vertical centring. */
body.page-id-88793 section.projekt-redesign-hero .row {
  min-height: 505px !important;
  align-items: flex-start !important;
}
body.page-id-88793 section.projekt-redesign-hero .row > .col {
  max-width: 640px;
  flex: 0 0 auto;
  margin-top: 0 !important;
  margin-bottom: auto !important;
  align-self: flex-start !important;
}

/* Overline "Sicher ans Ziel kommen". */
body.page-id-88793 section.projekt-redesign-hero .h3 {
  color: #2722f8 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* H1 "Projekte abwickeln". */
body.page-id-88793 section.projekt-redesign-hero h1 {
  font-family: "Kurdis Wide Bold", "Kurdis", sans-serif !important;
  font-weight: 700 !important;
  font-size: 51.8px !important;
  line-height: 60px !important;
  color: #0b1b45 !important;
  margin: 0 !important;
}

/* Drop the legacy orange underline accent — the redesign has none. */
body.page-id-88793 section.projekt-redesign-hero h1::after,
body.page-id-88793 section.projekt-redesign-hero h1::before {
  display: none !important;
}

/* Remove the anchor-link icons inside the hero overline + headline. */
body.page-id-88793 section.projekt-redesign-hero .headline-link {
  display: none !important;
}

/* Injected image + clipboard badge (right column), full-height organic mask. */
/* Media box hugs the photo (aspect-ratio-derived width) and is right-aligned,
   so the badge stays anchored to the mask's bottom-left curve at any width. */
body.page-id-88793 .projekt-hero-media {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 100%;
  max-height: 820px;
  aspect-ratio: 1190 / 1200;
  width: auto;
  z-index: 1;
  pointer-events: none;
}
body.page-id-88793 .projekt-hero-media .projekt-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}
body.page-id-88793 .projekt-hero-media .projekt-hero-badge {
  position: absolute;
  left: 1%;
  bottom: 6%;
  width: 120px;
  height: auto;
  z-index: 2;
}

/* Mobile: stack — text first, image below. */
@media (max-width: 991px) {
  /* Don't pull the hero up behind the header on mobile — the reduced top
     padding would let the overline collide with the breadcrumb above it.
     Sit the hero in normal flow just below the breadcrumb instead. */
  body.page-id-88793 section.projekt-redesign-hero {
    margin-top: 0 !important;
    padding: 24px 0 0 !important;
    overflow: visible;
  }
  body.page-id-88793 section.projekt-redesign-hero .row > .col {
    max-width: 100%;
  }
  body.page-id-88793 .projekt-hero-media {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 24px auto 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  body.page-id-88793 .projekt-hero-media .projekt-hero-photo {
    position: static;
    transform: none;
    height: auto;
    width: 100%;
  }
  body.page-id-88793 section.projekt-redesign-hero h1 {
    font-size: 40px !important;
    line-height: 48px !important;
  }
}


/* ================= SECTION 2 — 3-CARD INTRO ROW (Vplate-Row 2253:16661) ================= */

/* Dark band -> cream (matches the hero sand, cards are white on top). */
body.page-id-88793 section.bg-primary {
  background: #eeeee7 !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
/* Widen the 3-card grid to the Figma frame (3×416 + 2×32 gap ≈ 1312) so the
   cards read landscape, not narrow/elongated — this is what lets Card 2's title
   sit on one line and Card 3's on two. */
body.page-id-88793 section.bg-primary > .container {
  max-width: 1360px !important;
}
/* Equal-height columns so the card bottoms (and the action links pinned to
   them) line up across the row. */
body.page-id-88793 section.bg-primary > .container > .row {
  align-items: stretch !important;
}

/* Card: white, 24px radius, clipped so the photo corners round, no border. */
body.page-id-88793 section.bg-primary .card {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 24px rgba(11, 27, 69, 0.06) !important;
  height: 100% !important;
}
body.page-id-88793 section.bg-primary .card-body {
  padding: 0 !important;
  display: block !important;
  height: 100% !important;
}
/* Inner row -> single column (photo on top, text below), no gutters. */
body.page-id-88793 section.bg-primary .card-body > .row {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
}
body.page-id-88793 section.bg-primary .card-body > .row > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* Photo: full-bleed top, 266px, cover. The image column (.card-img-col, tagged
   by the JS) gets zero padding/margin so the photo fills the whole column
   edge-to-edge — object-fit:cover crops the overflow. A leading <style> node in
   the row makes :first-child unreliable, hence the JS class. */
body.page-id-88793 section.bg-primary .card .card-img-col,
body.page-id-88793 section.bg-primary .card-body > .row > div:first-child {
  padding: 0 !important;
  margin: 0 !important;
}
body.page-id-88793 section.bg-primary .card picture {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  width: 100% !important;
}
body.page-id-88793 section.bg-primary .card img {
  display: block !important;   /* no inline baseline gap once <picture> is gone */
  width: 100% !important;
  height: 266px !important;
  object-fit: cover !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* Text area: padded, left-aligned, fills the card. */
body.page-id-88793 section.bg-primary .card-body > .row > div:last-child {
  padding: 24px !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Title: the legacy h6 (first part) + h4 (second part) are Bootstrap heading
   CLASSES → display:block, so they always stacked as 2 lines. Make them flow
   INLINE as one title that wraps by width — with the grid widened, "Gesuch
   einstellen in der Projektbörse" now fits one line while the longer card 1/3
   titles wrap to two. A space is re-inserted between the two spans. */
body.page-id-88793 section.bg-primary .card .h6,
body.page-id-88793 section.bg-primary .card .h4 {
  display: inline !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  color: #0b1b45 !important;
  text-transform: none !important;
  margin: 0 !important;
}
/* Re-insert the word-gap between the two inline title spans (there is no
   whitespace between </span><span> in the source). */
body.page-id-88793 section.bg-primary .card .h6 {
  margin-right: 0.3em !important;
}
/* One flex item that holds both title spans (added by the JS). */
body.page-id-88793 section.bg-primary .card .card-title-wrap {
  margin: 0 0 13px !important;
}
/* Hide the little anchor-link icons next to headings. */
body.page-id-88793 section.bg-primary .card .headline-link { display: none !important; }

/* Description. */
body.page-id-88793 section.bg-primary .card p,
body.page-id-88793 section.bg-primary .card .h4 ~ p,
body.page-id-88793 section.bg-primary .card-body > .row > div:last-child p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #0b1b45 !important;
  margin: 13px 0 0 !important;
}

/* Body block: drop the legacy Bootstrap .mb-4 (24px) so the copy→link gap is
   tight (directive 3). */
body.page-id-88793 section.bg-primary .card div.mb-4 {
  margin-bottom: 0 !important;
}

/* Pin the action link to the card bottom (on the flex ITEM, so cards with less
   copy still line their links up with the taller cards). */
body.page-id-88793 section.bg-primary .card .btn-wrapper {
  margin-top: auto !important;
}

/* Orange button -> text + arrow link. */
body.page-id-88793 section.bg-primary .card .btn {
  margin-top: 0 !important;
  padding: 16px 0 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #0b1b45 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 28px !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-id-88793 section.bg-primary .card .btn::after {
  content: "";
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M1 6.5h13M9.5 1l5 5.5-5 5.5' stroke='%23fb581f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center right;
}


/* ================= SECTION 3 — ERSTER WEG / TIPS GRID (Icon-Grid mit Box 2253:17460) ================= */

/* Cream band, matches the sand above. JS tags the section .projekt-redesign-tips
   (anchored on #anchor-erster-weg) since the legacy <section> has no class. */
body.page-id-88793 section.projekt-redesign-tips {
  background: #eeeee7 !important;
  padding: 8px 0 80px !important;
}

/* --- Centered intro (overline + H2 + lead paragraph) --- */
/* Overline "Erster Weg" — legacy .h4 span -> small tech-blue uppercase eyebrow. */
body.page-id-88793 section.projekt-redesign-tips #anchor-erster-weg {
  display: block !important;
  color: #2722f8 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}
body.page-id-88793 section.projekt-redesign-tips #anchor-partner-im-verzeichnis-finden {
  font-family: "Kurdis Wide Bold", "Kurdis", sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 46px !important;
  letter-spacing: 0.64px !important;
  color: #0b1b45 !important;
  margin: 0 0 15px !important;
}
body.page-id-88793 section.projekt-redesign-tips #anchor-partner-im-verzeichnis-finden::after,
body.page-id-88793 section.projekt-redesign-tips #anchor-partner-im-verzeichnis-finden::before {
  display: none !important;
}
body.page-id-88793 section.projekt-redesign-tips .col-lg-10 p,
body.page-id-88793 section.projekt-redesign-tips .col-xl-8 p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #0b1b45 !important;
  margin: 0 auto !important;
}

/* Kill the little anchor-link icons everywhere in the section. */
body.page-id-88793 section.projekt-redesign-tips .headline-link { display: none !important; }

/* --- Tip cards (2x2). Each legacy .col-lg-6's children are wrapped in
   .tip-card by the JS so the white box can gap-separate from its neighbours. --- */
body.page-id-88793 section.projekt-redesign-tips .row > .col-lg-6 {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  display: flex !important;
}
body.page-id-88793 section.projekt-redesign-tips .tip-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 24px !important;
  width: 100% !important;
}

/* Title row: text left, dark-blue circular icon badge right. The legacy icon
   (.fa-stack) is the FIRST child of the h5 — CSS `order` flips it to the end so
   we don't need to move it in the DOM. */
body.page-id-88793 section.projekt-redesign-tips .tip-card h5 {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #0b1b45 !important;
}
body.page-id-88793 section.projekt-redesign-tips .tip-card hr { display: none !important; }
body.page-id-88793 section.projekt-redesign-tips .tip-card p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #0b1b45 !important;
  margin: 13px 0 0 !important;
}
body.page-id-88793 section.projekt-redesign-tips .tip-card p strong {
  font-weight: 700 !important;
}

/* Icon badge -> dark-blue 46px circle, white glyph, pushed to the right. */
body.page-id-88793 section.projekt-redesign-tips .tip-card h5 .fa-stack {
  order: 2 !important;
  flex: 0 0 auto !important;
  font-size: 23px !important;          /* 2em => 46px circle */
  width: 2em !important;
  height: 2em !important;
  line-height: 2em !important;
  margin: 0 !important;
}
body.page-id-88793 section.projekt-redesign-tips .tip-card h5 .fa-stack .fa-circle {
  color: #0b1b45 !important;
}
body.page-id-88793 section.projekt-redesign-tips .tip-card h5 .fa-stack .fa-inverse {
  color: #ffffff !important;
}

/* CTA -> centered orange pill "ZUM PARTNERVERZEICHNIS". */
body.page-id-88793 section.projekt-redesign-tips .btn-wrapper {
  text-align: center !important;
  margin-top: 32px !important;
}
body.page-id-88793 section.projekt-redesign-tips .btn.btn-wawi {
  display: inline-block !important;
  background: #fb581f !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0b1b45 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0.32px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 145px !important;
  width: auto !important;
}

/* Mobile: single column, cards stack. */
@media (max-width: 991px) {
  body.page-id-88793 section.projekt-redesign-tips #anchor-partner-im-verzeichnis-finden {
    font-size: 28px !important;
    line-height: 38px !important;
  }
}


/* ================= SECTION 4 — ZWEITER WEG / PROJEKTBÖRSE STEPS (Icon-Grid mit Box 2165:2441) ================= */

/* Legacy bg-secondary band -> cream, dark text. JS tags .projekt-redesign-zweiter
   (anchored on #anchor-zweiter-weg). Steps are rebuilt into .zw-steps by the JS. */
body.page-id-88793 section.projekt-redesign-zweiter {
  background: #eeeee7 !important;
  padding: 8px 0 80px !important;
}

/* --- Centered intro (overline + H2 + lead) — same treatment as Section 3. --- */
body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 > span.h4 {
  display: block !important;
  color: #2722f8 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 h2 {
  font-family: "Kurdis Wide Bold", "Kurdis", sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 46px !important;
  letter-spacing: 0.64px !important;
  color: #0b1b45 !important;
  margin: 0 0 15px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 h2::after,
body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 h2::before {
  display: none !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 > p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #0b1b45 !important;
  margin: 0 auto !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .headline-link { display: none !important; }

/* --- Rebuilt step grid: 2 steps per row, each = illustration + (number + text). --- */
body.page-id-88793 section.projekt-redesign-zweiter .zw-steps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
  margin: 40px 0 0 !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-step {
  flex: 0 0 calc(50% - 16px) !important;
  max-width: calc(50% - 16px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-illu {
  flex: 0 0 304px !important;
  max-width: 304px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-illu-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-num {
  flex: 0 0 auto !important;
  width: 47px !important;
  height: 47px !important;
  border-radius: 50% !important;
  background: #0b1b45 !important;
  color: #eeeee7 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 25px !important;
  line-height: 47px !important;
  text-align: center !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .zw-text {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #0b1b45 !important;
  margin: 0 !important;
}
/* Legacy <br> inside the step copy would force awkward wraps — neutralise. */
body.page-id-88793 section.projekt-redesign-zweiter .zw-text br { display: none !important; }

/* --- Video: dark rounded 24px box, centered (keeps the YouTube embed).
   Figma 2253:17905 — dark-blue #0b1b45, rounded 24, 84px orange play button. --- */
body.page-id-88793 section.projekt-redesign-zweiter .embed-responsive.youtube-standard {
  border-radius: 24px !important;
  overflow: hidden !important;
  width: 100% !important;            /* override the legacy w-lg-70/w-xl-60 cap */
  max-width: 1040px !important;      /* larger video box */
  margin: 144px auto 0 !important;  /* more breathing room above the box */
  background: #0b1b45 !important;
}
/* Dead-centre the play button (Figma 2253:17905) — the poster cover becomes a
   flex centre so the icon can't sit offset to the left. */
body.page-id-88793 section.projekt-redesign-zweiter .embed-responsive.youtube-standard .embed-cover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .embed-responsive.youtube-standard .embed-play {
  position: static !important;
  margin: 0 !important;
  color: #fb581f !important;
  font-size: 84px !important;
}

/* --- CTAs: orange pill first, outline pill second (Figma 2165:2568). --- */
body.page-id-88793 section.projekt-redesign-zweiter .btn-wrapper {
  gap: 32px !important;
  flex-wrap: wrap !important;
  margin-top: 32px !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .btn-wrapper .fa-file-pdf { display: none !important; }
body.page-id-88793 section.projekt-redesign-zweiter .btn {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0.32px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 145px !important;
  box-shadow: none !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .btn.btn-wawi {
  order: 0 !important;
  background: #fb581f !important;
  border: 0 !important;
  color: #0b1b45 !important;
}
body.page-id-88793 section.projekt-redesign-zweiter .btn.btn-outline-primary {
  order: 1 !important;
  background: transparent !important;
  border: 1px solid #0b1b45 !important;
  color: #0b1b45 !important;
}

@media (max-width: 991px) {
  body.page-id-88793 section.projekt-redesign-zweiter .col-lg-10 h2 {
    font-size: 28px !important;
    line-height: 38px !important;
  }
  body.page-id-88793 section.projekt-redesign-zweiter .zw-step {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  body.page-id-88793 section.projekt-redesign-zweiter .zw-illu {
    flex: 0 0 auto !important;
    max-width: 304px !important;
    width: 100% !important;
  }
}


/* ================= SECTION 5 — DRITTER WEG / PARTNER EMPFEHLEN (Icon-Grid mit Box 2253:17733) ================= */

/* Two white cards (title + icon badge right + body), cream band. The legacy
   cards already exist as .card.bg-secondary > .card-body, so no JS wrap — just
   tag the section (.projekt-redesign-dritter, anchored on #anchor-dritter-weg). */
body.page-id-88793 section.projekt-redesign-dritter {
  background: #eeeee7 !important;
  padding: 8px 0 0 !important;
}

/* Centered intro (overline + H2, no lead paragraph here). */
body.page-id-88793 section.projekt-redesign-dritter #anchor-dritter-weg {
  display: block !important;
  color: #2722f8 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
}
body.page-id-88793 section.projekt-redesign-dritter #anchor-partner-empfehlen-lassen {
  font-family: "Kurdis Wide Bold", "Kurdis", sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 46px !important;
  letter-spacing: 0.64px !important;
  color: #0b1b45 !important;
  margin: 0 !important;
}
body.page-id-88793 section.projekt-redesign-dritter #anchor-partner-empfehlen-lassen::after,
body.page-id-88793 section.projekt-redesign-dritter #anchor-partner-empfehlen-lassen::before {
  display: none !important;
}
body.page-id-88793 section.projekt-redesign-dritter .headline-link { display: none !important; }

/* Cards: dark bg-secondary -> white, 24px radius. */
body.page-id-88793 section.projekt-redesign-dritter .card {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 24px rgba(11, 27, 69, 0.06) !important;
}
body.page-id-88793 section.projekt-redesign-dritter .card-body {
  padding: 24px !important;
}

/* Title row: text left, dark-blue circular icon badge right (CSS `order` flip). */
body.page-id-88793 section.projekt-redesign-dritter .card .h5 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #0b1b45 !important;
}
body.page-id-88793 section.projekt-redesign-dritter .card hr { display: none !important; }
body.page-id-88793 section.projekt-redesign-dritter .card p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #0b1b45 !important;
  margin: 13px 0 0 !important;
}
body.page-id-88793 section.projekt-redesign-dritter .card .h5 .fa-stack {
  order: 2 !important;
  flex: 0 0 auto !important;
  font-size: 23px !important;
  width: 2em !important;
  height: 2em !important;
  line-height: 2em !important;
  margin: 0 !important;
}
body.page-id-88793 section.projekt-redesign-dritter .card .h5 .fa-stack .fa-circle {
  color: #0b1b45 !important;
}
body.page-id-88793 section.projekt-redesign-dritter .card .h5 .fa-stack .fa-inverse {
  color: #ffffff !important;
}

@media (max-width: 991px) {
  body.page-id-88793 section.projekt-redesign-dritter #anchor-partner-empfehlen-lassen {
    font-size: 28px !important;
    line-height: 38px !important;
  }
}


/* ================= SECTION 6 — CTA-BOX (CTA-Box-small 2253:16760) ================= */

/* Legacy dark bg-primary band -> cream; the .row becomes a white rounded (46px)
   box with left text + right blue-blob graphic. JS tags the section
   (.projekt-redesign-cta) and its two cols (.cta-text / .cta-media). */
body.page-id-88793 section.projekt-redesign-cta {
  background: #eeeee7 !important;
  color: #0b1b45 !important;
  padding: 8px 0 80px !important;
}
body.page-id-88793 section.projekt-redesign-cta > .container {
  max-width: 1320px !important;
}
body.page-id-88793 section.projekt-redesign-cta > .container > .row {
  margin: 0 !important;
  background: #ffffff !important;
  border-radius: 46px !important;
  overflow: hidden !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}

/* Left text column. */
body.page-id-88793 section.projekt-redesign-cta .cta-text {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 46px !important;
  margin: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Headline (the <strong> paragraph) -> H3 24/32, then the body paragraph. */
body.page-id-88793 section.projekt-redesign-cta .cta-text > p {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #0b1b45 !important;
  margin: 0 0 12px !important;
}
body.page-id-88793 section.projekt-redesign-cta .cta-text > p:first-child,
body.page-id-88793 section.projekt-redesign-cta .cta-text > p:first-child strong {
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: -0.4px !important;
}
body.page-id-88793 section.projekt-redesign-cta .cta-text > p:first-child {
  margin-bottom: 12px !important;
}
/* Orange pill CTA (scoped to the real button — never the modal / HubSpot form). */
body.page-id-88793 section.projekt-redesign-cta .cta-text > .btn-wrapper {
  margin: 20px 0 0 !important;
  text-align: left !important;
}
body.page-id-88793 section.projekt-redesign-cta .cta-text > .btn-wrapper .btn {
  margin: 0 !important;
  display: inline-block !important;
  width: auto !important;
  background: #fb581f !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0b1b45 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0.32px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 145px !important;
}

/* Right media column — the blue-blob graphic bleeds to the box's rounded edge. */
body.page-id-88793 section.projekt-redesign-cta .cta-media {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  position: relative !important;
  min-height: 300px !important;
}
body.page-id-88793 section.projekt-redesign-cta .cta-media picture,
body.page-id-88793 section.projekt-redesign-cta .cta-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: right center !important;
  border-radius: 0 !important;
}

@media (max-width: 991px) {
  body.page-id-88793 section.projekt-redesign-cta > .container > .row {
    flex-wrap: wrap !important;
  }
  body.page-id-88793 section.projekt-redesign-cta .cta-text {
    flex: 0 0 100% !important;
    padding: 32px !important;
    order: 0 !important;   /* text first on mobile (beats the legacy .order-2) */
  }
  body.page-id-88793 section.projekt-redesign-cta .cta-media {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-height: 220px !important;
    order: 1 !important;   /* blob graphic below the text */
  }
}