/* ===================================================================
 * paricon home CSS - loaded on front page only
 * Migrated from Kit #9 custom CSS field - Batch 4
 * =================================================================== */

/* === Body text readability fix (audit 2026-05-27): 12px is below
 *     industry-standard 14px minimum + fails accessibility on mobile.
 *     Scoped to body.home to avoid global side effects. === */
body.home .elementor-widget-text-editor p,
body.home .elementor-widget-text-editor li,
body.home .elementor-widget-icon-list .elementor-icon-list-text {
  font-size: clamp(14px, 0.3vw + 13px, 16px) !important;
  line-height: 1.55;
}

/* === "SAP IST TEUER & KOMPLEX?" section (75ec606): center-align the text
 *     column when it stacks alone above its sibling at tablet (<=1024px,
 *     where the desktop 2-col collapses to single-col and the section
 *     expands to ~full width). Below 1024 the text was left-aligned in a
 *     wide container with empty whitespace to the right (visual P1).
 *
 *     IMPORTANT: do NOT use margin-left/right: auto on the button widgets
 *     — they're flex items inside the button-cluster parent (195ff7a1), and
 *     margin: auto on flex items SPREADS them apart instead of centering
 *     the group. Use justify-content: center on the parent instead. === */
@media (max-width: 1024px) {
  body.home .elementor-element-75ec606,
  body.home .elementor-element-75ec606 .ui-e-headline,
  body.home .elementor-element-75ec606 .elementor-widget-text-editor,
  body.home .elementor-element-75ec606 .elementor-widget-text-editor .elementor-widget-container {
    text-align: center !important;
  }
  /* Cluster the buttons in the center of the (now-wide) container */
  body.home .elementor-element-195ff7a1 {
    justify-content: center !important;
  }
}

/* === PARICON ZERTIFIZIERTER SAP-PARTNER ring section (022d7d3) ===
 *     CONTEXT: section has 3 children — left stat card (f7cc930 "120+
 *     Produktkunden"), the ring widget (cd8f328), and right stat card
 *     (79a740e "29+ Jahre SAP-Expertise"). The two stat cards carry
 *     elementor-hidden-tablet + elementor-hidden-mobile classes, so they
 *     vanish at <=1024 (Elementor's tablet breakpoint).
 *
 *     AT >1024 (desktop): leave the original 3-col row design alone.
 *       The ring sits between two stat cards — no loneliness.
 *
 *     AT <=1024 (tablet/mobile): only the ring is visible. Without a fix
 *       it sits alone with vast horizontal whitespace. Constrain the
 *       container so the ring fills the available width sensibly.
 *
 *     EARLIER REGRESSION (audit 2026-05-27): wrong breakpoint of 1280
 *     forced flex-direction:column on the 3-child row at desktop sizes
 *     too, stacking the stats above/below the ring and producing a
 *     1201px-tall section with 1000px of internal empty space. Fixed
 *     by tightening the breakpoint to 1024. === */
@media (max-width: 1024px) {
  body.home .elementor-element-022d7d3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  body.home .elementor-element-022d7d3 > .e-con-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.home .elementor-element-022d7d3 .elementor-element-cd8f328 {
    margin-left: auto !important;
    margin-right: auto !important;
    /* 2026-06-14: give the badge column a square footprint so the pink signet
       ring (background-size:80% of width) renders LARGER than the SAP-logo +
       2-heading content stack (~160px). The old width:auto collapsed the column
       to its ~170px content width -> ring ~136px -> text overlapped the ring's
       lower arc (user-reported "cramped on mobile/tablet"). 280x280 -> ring
       ~224px, content centered with ~32px breathing room. Scoped <=1024 so the
       desktop 3-col composition is untouched. */
    width: 280px !important;
    max-width: 280px !important;
    min-height: 280px !important;
  }
}

/* === "Ihre Vorteile mit paricon" 4-card row stacking (audit 2026-05-27) ===
 *     At <=1024px, section 2d1cb4c has .e-con-inner constrained to ~33% width
 *     and cards inside bb1a95f get 82px columns -> 1-word-per-line text.
 *     Fix: expand the inner + stack title-and-cards vertically. === */
@media (max-width: 1024px) {
  body.home .elementor-element-2d1cb4c > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 32px;
  }
  body.home .elementor-element-2d1cb4c .elementor-element-dd287fd,
  body.home .elementor-element-2d1cb4c .elementor-element-bb1a95f {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  body.home .elementor-element-bb1a95f {
    flex-direction: column !important;
    gap: 16px;
  }
  body.home .elementor-element-bb1a95f > .elementor-widget,
  body.home .elementor-element-bb1a95f > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* C21: Social proof counter (old class names) */
[data-id="c21stat1"] .uicore-counter-number,
[data-id="c21stat1"] .uicore-counter-suffix {
  color: #FF0071 !important;
}
[data-id="c21stat1"] .uicore-counter-content {
  color: rgba(255,255,255,0.8) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* C21: Social proof counter (new class names) */
[data-id="c21stat1"] .ui-e-num,
[data-id="c21stat1"] .value,
[data-id="c21stat1"] .ui-e-suffix {
  color: #FF0071 !important;
}
[data-id="c21stat1"] .ui-e-title {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* Vorteile modal popup — page-specific border override */
[data-id="bb1a95f"] .bdt-modal-dialog {
  border: none !important;
  outline: none !important;
}

/* === VORTEILE CARD HOVER: Blur + CTA Reveal === */

/* Base */
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box {
  cursor: pointer;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 2px solid transparent !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              border-color 0.3s ease,
              box-shadow 0.4s ease !important;
}
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box .elementor-widget-container {
  border-radius: 16px !important;
  transition: filter 0.4s ease !important;
}

/* Shine sweep */
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

/* CTA overlay (hidden by default) */
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box::after {
  content: "Mehr erfahren";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(10,22,40,0.5);
  border-radius: 16px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 5;
}

/* Hover: lift + pink accent + blur content + show CTA */
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box:hover {
  transform: scale(1.06) translateY(-6px) !important;
  border-color: rgba(255,255,255,0.1) !important;
  border-bottom-color: #FF0071 !important;
  box-shadow: 0 20px 50px rgba(255,0,113,0.12), 0 10px 30px rgba(0,0,0,0.3) !important;
}
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box:hover .elementor-widget-container {
  filter: blur(6px) brightness(0.6) !important;
}
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box:hover::before {
  left: 120%;
}
[data-id="bb1a95f"] .elementor-widget-uicore-icon-box:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Hide modal buttons */
[data-id="bb1a95f"] .elementor-widget-bdt-modal {
  margin: 0 !important; padding: 0 !important;
}
[data-id="bb1a95f"] .bdt-modal-button {
  display: none !important;
}

/* Homepage clickable cards */
.elementor-element-0dbeb40,
.elementor-element-0b99883 {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-element-0dbeb40:hover,
.elementor-element-0b99883:hover {
  transform: translateY(-4px);
}

/* === Home KPI cards: force-center all 4 counter cards (override left-column overrides) ===
 * The widgets carry .ui-e-align-center but the left-column container neutralises it.
 * Forcing text-align on the wrapper, the heading, and the title brings the four cards
 * into visual parity. */
.elementor-element-3cad557,
.elementor-element-f2ba826,
.elementor-element-d67b204,
.elementor-element-f73dbc8 { text-align: center !important; }
.elementor-element-3cad557 .ui-e-wrp,
.elementor-element-f2ba826 .ui-e-wrp,
.elementor-element-d67b204 .ui-e-wrp,
.elementor-element-f73dbc8 .ui-e-wrp,
.elementor-element-3cad557 .ui-e-num,
.elementor-element-f2ba826 .ui-e-num,
.elementor-element-d67b204 .ui-e-num,
.elementor-element-f73dbc8 .ui-e-num,
.elementor-element-3cad557 .ui-e-title,
.elementor-element-f2ba826 .ui-e-title,
.elementor-element-d67b204 .ui-e-title,
.elementor-element-f73dbc8 .ui-e-title { text-align: center !important; }

/* Note 2026-05-26: removed legacy "ein Drittel" prefix-as-hero override
 * for .elementor-element-3cad557 — the card now carries a numeric counter
 * (120+ Produktkunden) so the standard .value digit must render normally. */


/* ============================================================
 * Brand name preservation (D02 fix 2026-05-28)
 * ------------------------------------------------------------
 * Per ~/paricon/CLAUDE.md the brand "paricon" must always render
 * lowercase in user-facing copy, including inside ancestor
 * elements that apply text-transform: uppercase (e.g. Variant A
 * pillar-card titles, future headlines, eyebrows). Wrapping the
 * brand token in <span class="prc-brand-name">paricon</span>
 * isolates it from any inherited uppercasing. font-feature-settings
 * inherits so small-caps/ligatures from the parent still apply if
 * intended.
 * ============================================================ */
.prc-brand-name {
  text-transform: none !important;
  font-feature-settings: inherit;
}

/* Homepage UiCore card slider: allow long German heading compounds to wrap
   inside the word on narrow/mobile cards. */
.elementor-86 .elementor-element-1964221 .wrap-heading .elementor-heading-title {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}


/* === Homepage hero rebuilt as self-contained custom-HTML + CSS-Grid widget
 *     (2026-06-02). The old Elementor column/card structure
 *     (.elementor-element-0dbeb40 / -0b99883, [data-id="62e6a5e"],
 *     .elementor-element-75ec606 inner layout, .elementor-widget-uicore-counter)
 *     no longer exists inside section 8808bf3 — it is now a single HTML
 *     widget (id prchero01) carrying its own scoped <style> block.
 *     All hero-override blocks that targeted those gone selectors
 *     (tasks #35/#36/#37/#41/#42 column-split, card-padding, card-width,
 *     vertical-center, wider-canvas + the 2026-05-29 proof-number bump)
 *     were removed here. Hero styling now lives entirely inside the
 *     widget's inline <style>. Do not re-add hero overrides to home.css. */


/* === Customer-logo trust bar — tighten the gap above it (2026-06-05) ===
 * The "Kunden, die auf paricon SAP-Lösungen vertrauen" carousel
 * (section 261cf55, heading 84ddf72, image-carousel 0974b0e / global-564)
 * floated ~138px below the SAP-Partner ring/stats section (022d7d3):
 * 64px ring margin-bottom + 64px logo inner-container padding-top
 * (+ heading box). That left the trust bar visually disconnected from
 * the stats above it. Pull it up by trimming both contributors. The
 * padding-top lives on the boxed inner container (.e-con-inner), not the
 * outer section. Verified DOM-aware at 1600 / 1024 / 768 / 390 viewports
 * per CLAUDE.md rules #18-#20. Bottom spacing left intact so the bar keeps
 * comfortable separation from the "Lösungen, Expertise, Partnerschaft"
 * section below.
 * ============================================================ */
.elementor-86 .elementor-element-022d7d3 { margin-bottom: 16px !important; }
.elementor-86 .elementor-element-261cf55 > .e-con-inner { padding-top: 20px !important; }


/* ===== JJ Review 1.0 layout pass (2026-06-07) ===== */
/* JJ HOME-13 – center KPI counter content (number+label) both axes inside the 4 oversized rounded card boxes */
/* Root cause: the 4 card-box flex containers (98bfbe3, 836ee5a, 3a6cdf0, 959466a)
 * carry --min-height 175-240px but no/partial align-items + justify-content, so the
 * single uicore-counter child anchors TOP-LEFT, leaving large empty space. These are
 * the .e-flex .e-con boxes that hold widgets 3cad557 / f2ba826 / d67b204 / f73dbc8.
 * Fix: force the box to a centered single-axis column so its lone child sits dead
 * center vertically and horizontally. Padding normalised to symmetric so centering is
 * true (base desktop rule had --padding-left:32px;--padding-right:0px). Scoped to the
 * home post wrapper (.elementor-86 / body.home). The central SAP-Partner ring (cd8f328)
 * and the outer left/right stat columns (f7cc930 align-items:flex-start, 79a740e
 * align-items:flex-end — they position the card stacks beside the ring) are untouched. */
body.home .elementor-element-022d7d3 .elementor-element-98bfbe3,
body.home .elementor-element-022d7d3 .elementor-element-836ee5a,
body.home .elementor-element-022d7d3 .elementor-element-3a6cdf0,
body.home .elementor-element-022d7d3 .elementor-element-959466a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
/* Keep the lone counter widget from stretching to the box edge so it stays a centered
 * content-sized block (these are .ui-e-counter-simple widgets). */
body.home .elementor-element-022d7d3 .elementor-element-98bfbe3 > .elementor-widget,
body.home .elementor-element-022d7d3 .elementor-element-836ee5a > .elementor-widget,
body.home .elementor-element-022d7d3 .elementor-element-3a6cdf0 > .elementor-widget,
body.home .elementor-element-022d7d3 .elementor-element-959466a > .elementor-widget {
  width: 100% !important;
  align-self: center !important;
}
/* The card boxes only render at >1024px (their parent stat columns f7cc930/79a740e
 * carry elementor-hidden-tablet + elementor-hidden-mobile), so no mobile @media is
 * needed — at <=1024 only the ring is visible and the existing 022d7d3 tablet block
 * (home.css) already governs that layout. */
/* === HOME-4: vertically center the two SAP hero card content stacks (2026-06-09) ===
 * Hero widget prchero01, cards .prc-hero__card--solutions / --expertise.
 * Problem: the card flow pinned .prc-hero__proof to the bottom via
 * margin-top:auto while .prc-hero__list grew with flex:1 1 auto, so the
 * title/sub/list cluster top-anchored and the proof block sat hard at the
 * bottom with dead space above it - the number/proof block read as too
 * HIGH relative to a balanced centre. Fix: let the whole title->sub->list->
 * proof stack center as one block. Neutralise the list flex-grow and the
 * proof margin-top:auto, then justify-content:center the card.
 * Scoped body.home + .prc-hero (beats the widget inline <style> on specificity).
 * Verified DOM-aware on staging at 1440: solutions topGap 34 / bottomGap 28,
 * expertise topGap 55 / bottomGap 49 (was top-anchored, all slack between
 * list and proof). align-items:stretch on the grid keeps both cards equal
 * height; this only redistributes the vertical slack inside each card.
 * ============================================================ */
body.home .prc-hero .prc-hero__card {
    justify-content: center;
}
body.home .prc-hero .prc-hero__list {
    flex: 0 0 auto;
}
body.home .prc-hero .prc-hero__proof {
    margin-top: 0;
}

/* === News-card buttons: mobile top-spacing (2026-06-14) ===
 *     Section 4ce79e7 ("Neues aus der paricon Welt" news carousel). On mobile the
 *     CTA buttons sat only ~8px below the card text (visibly tight, user-reported
 *     "buttons too close to the text above"). Add 16px top margin to every
 *     news-card button at <=767px so each card gets ~24px breathing room. Scoped
 *     to the news section + mobile only; desktop and other sections untouched. */
@media (max-width: 767px) {
  body.home .elementor-element-4ce79e7 .elementor-widget-button {
    margin-top: 16px !important;
  }
}

/* JJ-2026-06-15 news-story title mobile size — "Neues aus der paricon-Welt" cards.
   The story-card titles inherit the 35px desktop size on mobile, dominating the
   card + wrapping to 4 lines. Reduce to 22px on phones. Scoped to the news grid
   (post 86, container 1964221, .wrap-heading) so no other heading is affected. */
@media (max-width: 767px) {
  .elementor-86 .elementor-element-1964221 .wrap-heading .elementor-heading-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

/* HOME-6 mobile focal (2026-06-15): the new outpainted hero master biases the
   subject to the right with cyan negative space left/top (for the desktop
   headline). On mobile portrait a centered cover-crop lands on the empty cyan,
   so shift the focal point right to keep the subject in frame. */
@media (max-width: 767px) {
  .elementor-element-e6597c0 .swiper-slide-bg {
    background-position-x: 80% !important;
  }
}

/* === Boxed content-width on wide screens (2026-06-16) =====================
 * Symptom (user-reported): on >1440px monitors the home page looked cramped
 * with large empty side gutters. Cause: every boxed section's .e-con-inner is
 * capped at the global Elementor content width of 1176px, so at 1920 the
 * content filled only 61% of the viewport (ratio 0.61) and at 2560 only 46%.
 * The page was authored at ~1440 where 1176px fills ~82% and reads fine.
 *
 * Fix: raise the boxed content cap on the home page from 1176px to 1320px
 * (standard "wide boxed" width). The .prc-hero__grid in the TEUER section
 * (8808bf3) is ALREADY authored with max-width:1440px and was only being held
 * back by the 1176 container, so this just lets it breathe. Applied to ALL
 * boxed home sections together so their left/right edges stay aligned (widening
 * only one section would make it jut ~70px past its neighbours).
 *
 * NOT a Kit save -> avoids the site-wide Elementor CSS-regen footgun (CLAUDE.md
 * Rule #1). NOT site-wide -> other pages keep 1176 until promoted deliberately.
 *
 * Boxed, never full-bleed. Reduced 1320->1240 on 2026-06-29 (1320 read slightly
 * too wide; 1240 is a more typical content width while staying more generous than
 * the 1176 kit default). 1440->1240 (86%, ~100px gutter), 1920->1240 (65%, ~340px
 * gutter), 2560->1240 (48%, ~660px gutter). The min(95%,...) term means <=~1305px
 * viewports are mathematically UNCHANGED (95% governs there), so all existing
 * <=1024 stacked-layout rules above are untouched.
 * Verified DOM-aware + multi-viewport (1440/1920/2560) per CLAUDE.md #18-#20;
 * full-page scan confirmed no boxed section breaks at the wider width (the ring
 * section 022d7d3 stat cards stay tight-gapped, gaps 20px). === */
body.home .e-con.e-con-boxed > .e-con-inner {
  max-width: min(95%, 1240px) !important;
}

/* === Hero CTA buttons: cursor-tilt is INTENTIONALLY KEPT (2026-06-16) =========
 * The hero CTAs (.prc-hero .elementor-button) get the UiCore theme's global
 * "magnetic" cursor-tilt (wp-content/uploads/uicore-global.js: a single
 * mousemove handler bound to a site-wide selector list incl. `.elementor-button`
 * that writes an inline `translate(...) rotate3d(..., 12deg)` on move). It is the
 * SAME single handler / same formula as every other button on the site (verified:
 * not double-bound, no hero-specific mechanism). The operator confirmed this tilt
 * is ON-BRAND and should stay on the self-built hero too, matching the rest of the
 * site. So there is deliberately NO override here. Do NOT "fix" a perceived hero
 * button jitter by neutralising the transform — that was tried 2026-06-16 and
 * reverted on operator request. If the tilt ever needs softening, do it at the
 * source (the shared uicore-global.js handler), site-wide, not just the hero. === */

/* === Hero CTA buttons: NO layout shift on hover (2026-06-16) ================
 * Separate from the (kept, on-brand) cursor-tilt above. User-reported: hovering
 * either hero button made "the whole element jitter and the two cards grow ~2px"
 * even though only the button is being interacted with.
 *
 * Root cause (measured live, NOT the transform tilt): .prc-hero__grid is a 3-col
 * `align-items: stretch` grid (intro + 2 cards), so all three columns share the
 * tallest column's height. The intro column holds the CTAs. On hover the theme
 * changes each button's BORDER-WIDTH — primary: none->1px (+2px box); secondary:
 * 1.5px->1px (-1px box) — and because the buttons are box-sizing:border-box with
 * auto height, the border-width change resizes the button's box -> the intro
 * column reflows -> the grid row resizes -> BOTH cards stretch/shrink with it.
 * (Verified: hovering the primary grew grid/intro/cards by exactly +2.00px; the
 * button's offsetHeight went 44->46 while its scrollHeight was unchanged.)
 *
 * Fix: pin each button's border-width across rest AND :hover so the box-model is
 * invariant on hover -> intro height stable -> cards never move. Does NOT touch
 * the cursor-tilt (transform-only, no layout) and does NOT change the resting
 * look (primary stays borderless, secondary keeps its 1.5px outline). Border
 * COLOR may still change on hover. === */
body.home .prc-hero .prc-hero__btn--primary .elementor-button,
body.home .prc-hero .prc-hero__btn--primary .elementor-button:hover,
body.home .prc-hero .prc-hero__btn--primary .elementor-button:focus {
  border-style: none !important;
  border-width: 0 !important;
}
body.home .prc-hero .prc-hero__btn--secondary .elementor-button,
body.home .prc-hero .prc-hero__btn--secondary .elementor-button:hover,
body.home .prc-hero .prc-hero__btn--secondary .elementor-button:focus {
  border-style: solid !important;
  border-width: 1.5px !important;
}