/* ===================================================================
 * paricon portfolio CSS — loaded on Portfolio page (#376) only
 * Migrated from Kit #9 custom CSS field — Batch 5
 * =================================================================== */

/* Portfolio tab/card visibility */
.prc-solutions-content.prc-hidden,
.prc-consulting-content.prc-hidden {
  display: none !important;
}

/* Consulting card base */
.prc-consulting-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid rgba(2, 203, 255, 0.08);
  cursor: default;
}
.prc-consulting-card:hover {
  border-color: rgba(2, 203, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(2, 203, 255, 0.1);
  transform: translateY(-3px);
}

.prc-clickable-card { cursor: pointer; transition: transform 0.2s ease; }
.prc-clickable-card:hover { transform: translateY(-3px); }

/* Solution pill badges on consulting cards */
.prc-solution-pill {
  display: inline-block;
  background: rgba(255, 0, 113, 0.12);
  color: #FF0071;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 2px 4px 2px 0;
}
.prc-solution-pill:hover {
  background: rgba(255,0,113,0.25);
}

/* Consulting expertise cards 2-column layout */
.prc-consulting-content > .e-con > .prc-consulting-card {
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  flex-basis: calc(50% - 12px) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Card inner spacing */
.prc-consulting-card .elementor-widget-divider {
  padding-top: 4px;
  padding-bottom: 4px;
}
.prc-consulting-card .elementor-widget-icon-list {
  margin-bottom: 8px;
}

/* Icon box: prevent stretching */
.prc-consulting-card .e-con.e-con-full {
  flex-shrink: 0;
}

/* Consulting card icon fix */
.prc-consulting-card .elementor-widget-html {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prc-consulting-card .elementor-widget-html .elementor-widget-container {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prc-consulting-card .elementor-widget-html i[class*="ti-"] {
  font-family: "tabler-icons" !important;
  font-style: normal;
}
/* Force icon container to be exactly 56x56 */
.prc-consulting-card > .e-con-inner > .e-con:first-child > .e-con-inner > .e-con:first-child {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Consulting card: push button to bottom so all cards align */
.prc-consulting-card > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Consulting Venn center label fix */
.elementor-element-b70beb1 {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  white-space: nowrap;
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Responsive: single column on mobile */
@media (max-width: 767px) {
  .prc-consulting-card {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .prc-consulting-content > .e-con > .prc-consulting-card {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* ===== Portfolio 376 rebuild reskin (merged) ===== */

/* ===================================================================
 * paricon Portfolio (post 376) – page-scoped reskin
 * -------------------------------------------------------------------
 * Loaded on page 376 ONLY (paricon-kit-css.php → portfolio.css).
 * Append/merge target: wp-content/mu-plugins/paricon-css/portfolio.css
 *
 * Scope discipline (hard rule from the rebuild spec, §"Build constraints"):
 *   - EVERY selector below is prefixed with body:is(.page-id-376,.page-id-2826) so nothing
 *     can leak onto other pages even if the file is ever loaded broadly.
 *   - This file does NOT touch any mu-plugin <style> block. The consulting
 *     cards in paricon-team-modals.php (Block 1/2, CLAUDE.md website-rule 13)
 *     are out of scope and are not referenced here.
 *   - Kit custom-CSS field stays empty (CLAUDE.md website-rule 3).
 *
 * Brand palette (the ONLY colours allowed – spec line 138):
 *   CYAN  #02CBFF  accent, Suiten accent, focus ring, hairlines
 *   PINK  #FF0071  Frameworks/Solutions accent, bullets, highlights
 *   NAVY  #192D41  card / section background
 *   DARK  #1A2032  page dark background
 *   WHITE #FFFFFF  headings
 *   Body text uses rgba(255,255,255,.5–.78) per the site body token.
 *
 * Accent split (spec line 116, RESUMPTION_PLAN E8):
 *   Frameworks-Grid → PINK  #FF0071
 *   Suiten-Grid     → CYAN  #02CBFF
 *
 * HTML contract for the build wave
 * --------------------------------
 * The Elementor-data / HTML-widget build attaches these page-scoped hooks
 * (BEM-ish, prc-p376- namespace). Nothing here assumes a specific Elementor
 * element-id, so the build can wire either native widgets or HTML widgets:
 *
 *   USP band (S3):      .prc-p376-usp  > .prc-p376-usp__lead (3 cards)
 *                                      > .prc-p376-usp__secondary (3 cards)
 *                       each card: .prc-p376-usp-card
 *   Dreiklang (S4):     .prc-p376-dreiklang > .prc-p376-venn
 *                       circles: .prc-p376-venn__circle (×3)
 *                       centre:  .prc-p376-venn__center
 *   Frameworks (S5):    .prc-p376-grid--frameworks > .prc-p376-tile (×5)
 *   Suiten (S6):        .prc-p376-grid--suites     > .prc-p376-tile (×2)
 *                       tile parts: __kicker __title __desc __cta
 *   Lead paragraphs:    add .prc-p376-lead to any intro text-editor wrapper.
 *
 * Provenance: docs/portfolio-376-rebuild-spec.md (S3–S6),
 *             docs/portfolio-rebuild-brief.md §4 (polish patterns),
 *             _working/.../portfolio-376-map.md finding #6 (off-palette audit).
 * =================================================================== */


/* ===================================================================
 * 0. Brand-palette normalization (portfolio-376-map.md finding #6)
 * -------------------------------------------------------------------
 * ~60 off-palette colour tokens are stored in _elementor_data. The data
 * write fixes them at source; these rules are the page-scoped safety net
 * that re-paints any element whose stored colour still resolves off-brand
 * (e.g. inline styles Elementor regenerates from the old token before the
 * data fix lands, or HTML-widget markup carrying a hard-coded hex).
 *
 * Mapping (off-palette → nearest brand token):
 *   #1B1B2C, #161927, #1B1F31, #0D1625, #020101, #121212  → DARK  #1A2032
 *     (dark backgrounds / near-black sections collapse to the one dark bg)
 *   #2798FF, #00CBFF, #6EC1E4, #207FD4, #02cbff            → CYAN  #02CBFF
 *     (every off-cyan / wrong-tint / lowercase / missing-zero → brand cyan)
 *   #F2295B                                                → PINK  #FF0071
 *     (wrong pink → brand pink)
 *
 * These target the page wrapper + section backgrounds and the two icon-
 * coloured accent surfaces. They are intentionally low-specificity so an
 * explicit brand colour on a child still wins.
 * =================================================================== */

/* Off-brand dark surfaces → single brand dark background.
 * Elementor writes section bg as inline style on .elementor-element;
 * attribute-substring match catches the stored off-palette hex regardless
 * of element-id. */
body:is(.page-id-376,.page-id-2826) [style*="background-color: #1B1B2C"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#1B1B2C"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #161927"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#161927"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #1B1F31"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#1B1F31"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #0D1625"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#0D1625"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #020101"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#020101"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #121212"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#121212"] {
  background-color: #1A2032 !important;
}

/* Off-cyan text/icon colours → brand cyan. Covers #2798FF, #00CBFF,
 * #6EC1E4, #207FD4 and the lowercase #02cbff variant. */
body:is(.page-id-376,.page-id-2826) [style*="color: #2798FF"],
body:is(.page-id-376,.page-id-2826) [style*="color:#2798FF"],
body:is(.page-id-376,.page-id-2826) [style*="color: #00CBFF"],
body:is(.page-id-376,.page-id-2826) [style*="color:#00CBFF"],
body:is(.page-id-376,.page-id-2826) [style*="color: #6EC1E4"],
body:is(.page-id-376,.page-id-2826) [style*="color:#6EC1E4"],
body:is(.page-id-376,.page-id-2826) [style*="color: #207FD4"],
body:is(.page-id-376,.page-id-2826) [style*="color:#207FD4"],
body:is(.page-id-376,.page-id-2826) [style*="color: #02cbff"],
body:is(.page-id-376,.page-id-2826) [style*="color:#02cbff"] {
  color: #02CBFF !important;
}
body:is(.page-id-376,.page-id-2826) [style*="background-color: #2798FF"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#2798FF"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #00CBFF"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#00CBFF"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #6EC1E4"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#6EC1E4"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #207FD4"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#207FD4"],
body:is(.page-id-376,.page-id-2826) [style*="background-color: #02cbff"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#02cbff"] {
  background-color: #02CBFF !important;
}

/* Wrong pink #F2295B → brand pink. */
body:is(.page-id-376,.page-id-2826) [style*="color: #F2295B"],
body:is(.page-id-376,.page-id-2826) [style*="color:#F2295B"] {
  color: #FF0071 !important;
}
body:is(.page-id-376,.page-id-2826) [style*="background-color: #F2295B"],
body:is(.page-id-376,.page-id-2826) [style*="background-color:#F2295B"] {
  background-color: #FF0071 !important;
}

/* Page-level fallback: ensure the section wrapper stays on the brand dark
 * background so no off-palette inherited bg shows through gaps between
 * the rebuilt bands. */
body:is(.page-id-376,.page-id-2826) .elementor-section-wrap,
body:is(.page-id-376,.page-id-2826) .e-con.e-parent.prc-p376-dark {
  background-color: #1A2032;
}


/* ===================================================================
 * 1. Polish patterns ported from portfolio-rebuild-brief.md §4
 * -------------------------------------------------------------------
 * These were SHARED-Pn lifts the wave-2 maturation identified as
 * site-wide-safe. Re-scoped here to page 376 only.
 * =================================================================== */

/* §4.1 – WCAG 2.4.7 blanket focus-visible fallback.
 * Every interactive element on the page gets a visible cyan focus ring.
 * Brief used a variant-class anchor; here the page-id scope replaces it. */
body:is(.page-id-376,.page-id-2826) a:focus-visible,
body:is(.page-id-376,.page-id-2826) button:focus-visible,
body:is(.page-id-376,.page-id-2826) .elementor-button:focus-visible,
body:is(.page-id-376,.page-id-2826) [tabindex]:focus-visible {
  outline: 2px solid #02CBFF !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* §4.2 – Pill button geometry. Cohort /karriere/ + /portfolio/ use 999px
 * pills throughout. Apply to every Elementor button on the page. */
body:is(.page-id-376,.page-id-2826) .elementor-button,
body:is(.page-id-376,.page-id-2826) .elementor-button-link,
body:is(.page-id-376,.page-id-2826) a.elementor-button {
  border-radius: 999px;
}

/* §4.5 – Lead-paragraph rhythm (Barlow 17/1.65 + cyan hairline).
 * Applied to any intro text-editor carrying .prc-p376-lead:
 * profil-intro (S2), dreiklang-intro (S4), usecase-body (S7),
 * expertise-intro-text (S8). The cyan hairline anchors each lead. */
body:is(.page-id-376,.page-id-2826) .prc-p376-lead p,
body:is(.page-id-376,.page-id-2826) .prc-p376-lead .elementor-widget-container > p {
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-lead p::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background-color: #02CBFF;
  margin: 24px auto 0;
  opacity: 0.6;
}
/* Left-aligned lead variant (trust-strip / partner badge): hairline hugs
 * the text start instead of centring. */
body:is(.page-id-376,.page-id-2826) .prc-p376-lead--start p {
  margin-left: 0;
  margin-right: 0;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-lead--start p::after {
  margin-left: 0;
}


/* ===================================================================
 * 2. Shared section chrome (eyebrow + heading rhythm)
 * -------------------------------------------------------------------
 * S3/S4/S5/S7/S8 all open with an eyebrow kicker + a white heading.
 * One consistent treatment keeps the rebuilt bands visually coherent.
 * =================================================================== */

/* Eyebrow / section kicker – uppercase, letter-spaced, cyan by default.
 * Add .prc-p376-eyebrow--pink on the Frameworks band for the accent split. */
body:is(.page-id-376,.page-id-2826) .prc-p376-eyebrow {
  display: inline-block;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #02CBFF;
  margin-bottom: 12px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-eyebrow--pink {
  /* white for WCAG AA contrast on the dark bg; pink #FF0071 failed at this size
     (a11y audit 2026-06-16). Pink stays the section accent via borders/arrows. */
  color: #FFFFFF;
}

/* Section heading – white Barlow, tight rhythm above the body. */
body:is(.page-id-376,.page-id-2826) .prc-p376-section-heading,
body:is(.page-id-376,.page-id-2826) .prc-p376-section-heading .elementor-heading-title {
  color: #FFFFFF;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  line-height: 1.18;
}


/* ===================================================================
 * 3. USP value band (S3) – 3 lead cards + 3 secondary cards
 * -------------------------------------------------------------------
 * Spec S3: lead triad (SmartScan transparency / Produkt-DNA + Umsetzung /
 * Komplexitaet beherrschbar) sits above a lighter secondary row
 * (Software-first & Clean Core / Zukunftssicher / Compliance-ready).
 * Lead cards read heavier; secondary cards are quieter.
 * Visible border at rest per brief §4.3 (cards must show an edge unhovered).
 * =================================================================== */

body:is(.page-id-376,.page-id-2826) .prc-p376-usp {
  background-color: #1A2032;
}

/* Lead + secondary rows are responsive flex grids. */
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__lead,
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary {
  margin-top: 24px;
}

/* Card base – three-up at desktop, visible cyan hairline at rest. */
body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 260px;
  max-width: 380px;
  background-color: #192D41;
  border: 1px solid rgba(2, 203, 255, 0.18);   /* §4.3 visible at rest */
  border-radius: 14px;
  padding: 28px 26px;
  transition: border-color 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card:hover {
  border-color: #02CBFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(2, 203, 255, 0.10);
}

/* Lead cards carry a pink top-accent rule so the triad reads as primary. */
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__lead .prc-p376-usp-card {
  border-top: 3px solid #FF0071;
}

/* Secondary cards are quieter: smaller padding, lower-contrast border. */
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary .prc-p376-usp-card {
  padding: 22px 22px;
  border-color: rgba(255, 255, 255, 0.10);
  background-color: rgba(25, 45, 65, 0.55);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary .prc-p376-usp-card:hover {
  border-color: rgba(2, 203, 255, 0.45);
}

/* Card title + text rhythm. */
body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card__title {
  color: #FFFFFF;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 10px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card__text {
  color: rgba(255, 255, 255, 0.72);
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}


/* ===================================================================
 * 4. Compact Dreiklang (S4) – Clean-Core domain story, small footprint
 * -------------------------------------------------------------------
 * Spec S4 + transcript 382: the current graphic is too big. Rebuild it
 * smaller. Three labelled circles (Data Management / Extensibility /
 * Compliance) around a SAP-CLEAN-CORE centre. The centre-label fix from
 * the existing portfolio.css (element b70beb1) is preserved separately;
 * this block styles the new native/SVG composition.
 * =================================================================== */

body:is(.page-id-376,.page-id-2826) .prc-p376-dreiklang {
  background-color: #1A2032;
}

/* Cap the composition footprint so it stays "smaller than current". */
body:is(.page-id-376,.page-id-2826) .prc-p376-venn {
  position: relative;
  max-width: 620px;          /* compact – was an oversized full-width band */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

/* Three domain chips. Cyan hairline at rest (brief §4.3 tile pattern). */
body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle {
  flex: 1 1 170px;
  min-width: 160px;
  max-width: 190px;
  background-color: #192D41;
  border: 1px solid rgba(2, 203, 255, 0.18);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.2s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle:hover {
  border-color: #02CBFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle-title {
  color: #FFFFFF;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
}
/* Mini-text under each domain (the "·"-joined item list). Kept tight. */
body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle-items {
  color: rgba(255, 255, 255, 0.62);
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}

/* Centre label – SAP CLEAN CORE. Cyan, the shared foundation of all three. */
body:is(.page-id-376,.page-id-2826) .prc-p376-venn__center {
  flex: 1 1 100%;
  text-align: center;
  margin-top: 4px;
  color: #02CBFF;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}


/* ===================================================================
 * 5. Frameworks / Suiten tile grid (S5 + S6)
 * -------------------------------------------------------------------
 * Spec S5: 5 framework tiles, accent PINK #FF0071.
 * Spec S6: 2 suite tiles,     accent CYAN #02CBFF.
 * Tile anatomy (spec line 100/110): kicker (FRAMEWORK|SUITE) + title +
 * one-line use-case description + "Zur Loesung" link.
 * Brief §4.3: visible border at rest; accent edge on hover.
 * =================================================================== */

/* Shared grid wrapper – responsive auto-fit, equal-height tiles. */
body:is(.page-id-376,.page-id-2826) .prc-p376-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}
/* Frameworks row holds 5 tiles; cap at 3 columns so 5 wrap 3+2 cleanly. */
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks {
  grid-template-columns: repeat(3, 1fr);
}
/* Suiten row holds 2 tiles; two columns. */
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Tile base – navy card, visible hairline at rest (brief §4.3). */
body:is(.page-id-376,.page-id-2826) .prc-p376-tile {
  display: flex;
  flex-direction: column;
  background-color: #192D41;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}

/* Tile kicker – FRAMEWORK / SUITE label, takes the band accent colour. */
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__kicker {
  display: inline-block;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__title {
  color: #FFFFFF;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 10px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__desc {
  color: rgba(255, 255, 255, 0.70);
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
/* "Zur Loesung" link – pushed to the bottom so every tile aligns. */
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: Barlow, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__cta::after {
  content: "→";
  font-weight: 700;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-tile__cta:hover {
  gap: 10px;
}

/* ---- Frameworks accent: PINK #FF0071 (spec line 116) ---- */
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks .prc-p376-tile__kicker {
  /* white for WCAG AA contrast at 11px; pink #FF0071 failed (3.67) on the dark
     tile. The tile's pink top-border stays the accent (a11y audit 2026-06-16). */
  color: #FFFFFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks .prc-p376-tile {
  border-top: 3px solid rgba(255, 0, 113, 0.35);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks .prc-p376-tile:hover {
  border-color: #FF0071;
  border-top-color: #FF0071;
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(255, 0, 113, 0.14);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks .prc-p376-tile__cta {
  /* white for WCAG AA contrast; pink #FF0071 failed AA on the dark tile
     (a11y audit 2026-06-16). The tile's pink top-border + hover lift remain the
     brand cue. */
  color: #FFFFFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks .prc-p376-tile__cta:hover {
  color: #FFFFFF;   /* hover feedback comes from the tile lift + pink border */
}

/* ---- Suiten accent: CYAN #02CBFF (spec line 116) ---- */
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites .prc-p376-tile__kicker {
  color: #02CBFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites .prc-p376-tile {
  border-top: 3px solid rgba(2, 203, 255, 0.35);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites .prc-p376-tile:hover {
  border-color: #02CBFF;
  border-top-color: #02CBFF;
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(2, 203, 255, 0.14);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites .prc-p376-tile__cta {
  color: #02CBFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites .prc-p376-tile__cta:hover {
  color: #4FDCFF;   /* lighter cyan tint of #02CBFF for hover feedback */
}


/* ---- Whole-tile clickable (stretched-link) ----
 * The framework + suite tiles each carry one real link (.prc-p376-tile__cta).
 * A transparent ::before on that link, sized to the positioned tile, makes the
 * ENTIRE card a click target without extra markup or JS — the card already
 * lifts on hover, so this matches the affordance. Scoped to the two solution
 * grids ONLY: the 8 "Acht Disziplinen" tiles have no __cta, so they stay
 * non-clickable (no misleading pointer). ::after is the "arrow", so the
 * overlay uses ::before. Keyboard users still tab to the real link. */
body:is(.page-id-376,.page-id-2826) .prc-p376-tile:has(> .prc-p376-tile__cta) {
  position: relative;
  cursor: pointer;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-tile:has(> .prc-p376-tile__cta) .prc-p376-tile__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ===================================================================
 * 6. Responsive
 * -------------------------------------------------------------------
 * Breakpoints chosen DOM-aware (CLAUDE.md website-rule 18): the tile grids
 * are pure CSS grid (no Elementor elementor-hidden-* siblings), so the
 * stack is governed only by minmax(). Explicit column counts collapse at
 * tablet and mobile.
 * =================================================================== */

/* Tablet: frameworks 3→2 columns; USP cards relax to 2-up. */
@media (max-width: 1024px) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks {
    grid-template-columns: repeat(2, 1fr);
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card {
    flex-basis: calc(50% - 12px);
  }
}

/* Mobile: everything single column. */
@media (max-width: 767px) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-grid,
  body:is(.page-id-376,.page-id-2826) .prc-p376-grid--frameworks,
  body:is(.page-id-376,.page-id-2826) .prc-p376-grid--suites {
    grid-template-columns: 1fr;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp__lead,
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary {
    flex-direction: column;
    align-items: stretch;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle {
    flex-basis: 100%;
    max-width: 100%;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-lead p {
    font-size: 16px;
  }
}


/* ===================================================================
 * 5b. Frameworks / Suiten MOBILE ACCORDION (≤767) — responsive swap
 * -------------------------------------------------------------------
 * On phones the 5-up frameworks grid + 2-up suiten grid each become a
 * single-open accordion. Desktop/tablet (≥768) keep the card grids
 * untouched (the grid→accordion display swap lives in the ≤767 block at
 * the very bottom of this file). Markup is injected as a sibling directly
 * AFTER each grid inside the same HTML widget (9f6e4d8 frameworks /
 * d4ebdef suiten, same ids on 376 + 2826). Behaviour (single-open, panel
 * max-height, pre-paint arm) is owned by paricon-portfolio-accordion.php.
 *
 * The grid is hidden via :has(+ .prc-p376-accordion) — NOT by bare
 * .prc-p376-grid--frameworks, because the "Acht Disziplinen" expertise
 * grid (9413e58) ALSO carries --frameworks and must stay a grid.
 *
 * a11y (audit 2026-06-16): frameworks kicker/cta WHITE, suiten kicker
 * CYAN — mirrors the tiles. No-JS: <html> without .prc-acc-armed leaves
 * the panels open, so today's stacked-card content stays reachable.
 * =================================================================== */

/* Hidden on desktop/tablet; the ≤767 block reveals it. */
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion {
  display: none;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Item — mirrors .prc-p376-tile (navy card, hairline, 16px radius). */
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-item {
  background-color: #192D41;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--frameworks .prc-p376-acc-item {
  border-top: 3px solid rgba(255, 0, 113, 0.35);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-item {
  border-top: 3px solid rgba(2, 203, 255, 0.35);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--frameworks .prc-p376-acc-item.is-open {
  border-color: #FF0071;
  border-top-color: #FF0071;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-item.is-open {
  border-color: #02CBFF;
  border-top-color: #02CBFF;
}

/* Trigger row — full-width button, generous tap target. */
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-trigger {
  width: 100%;
  min-height: 64px;
  padding: 15px 16px;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  font-family: Barlow, sans-serif;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-trigger:focus-visible {
  outline: 2px solid #02CBFF;
  outline-offset: -2px;
  border-radius: 14px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-kicker {
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--frameworks .prc-p376-acc-kicker { color: #FFFFFF; }
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-kicker { color: #02CBFF; }
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-title {
  font-family: Barlow, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #FFFFFF;
}

/* +/× affordance (decorative) — rotates 45° + fills the band accent on open. */
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon::before,
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon::before { width: 13px; height: 2px; }
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon::after  { width: 2px; height: 13px; }
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-item.is-open .prc-p376-acc-icon { transform: rotate(45deg); }
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--frameworks .prc-p376-acc-item.is-open .prc-p376-acc-icon {
  background: #FF0071;
  border-color: #FF0071;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-item.is-open .prc-p376-acc-icon {
  background: #02CBFF;
  border-color: #02CBFF;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-item.is-open .prc-p376-acc-icon::before,
body:is(.page-id-376,.page-id-2826) .prc-p376-accordion--suites .prc-p376-acc-item.is-open .prc-p376-acc-icon::after {
  background: #192D41;
}

/* Panel — open by default (no-JS path); collapsed only once JS arms <html>.
   JS sets inline max-height to scrollHeight on open so longer EN copy fits. */
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-panel {
  overflow: hidden;
  transition: max-height 0.34s ease;
}
html.prc-acc-armed body:is(.page-id-376,.page-id-2826) .prc-p376-acc-panel {
  max-height: 0;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-content {
  padding: 0 16px 20px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-desc {
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.70);
  margin: 2px 0 16px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-cta {
  font-family: Barlow, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-cta::after { content: "→"; font-weight: 700; }
body:is(.page-id-376,.page-id-2826) .prc-p376-acc-cta:hover { gap: 10px; }

/* Reduced motion — accordion still functions, just no animation. */
@media (prefers-reduced-motion: reduce) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-acc-panel,
  body:is(.page-id-376,.page-id-2826) .prc-p376-acc-icon { transition: none; }
}

/* The swap — only grids with an accordion sibling are hidden (frameworks
   9f6e4d8 + suiten d4ebdef); the expertise grid (9413e58) stays a grid. */
@media (max-width: 767px) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-grid:has(+ .prc-p376-accordion) {
    display: none;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-accordion {
    display: flex;
  }
}


/* ===================================================================
 * Warum-paricon accordion (S3) – mobile-only condensed view
 * -------------------------------------------------------------------
 * The 6 USP cards are excessive on phones. Below 768px we hide the
 * card grid and show a condensed 3-pill <details> accordion (one open
 * at a time via the native [name] attribute – no JS). Desktop + tablet
 * keep the full 6-card grid untouched. Tokens mirror the USP cards:
 * navy #192D41, cyan #02CBFF, pink #FF0071, Barlow, text rgba(255,255,255,.78).
 * Scoped to page 376 so the EN /solutions/ (2826) keeps its cards until
 * the EN sibling is built.
 * =================================================================== */
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc { display: none; }

@media (max-width: 767px) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp__lead,
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp__secondary { display: none !important; }
  body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc { display: grid; gap: 12px; margin-top: 4px; }
}

body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__item { margin: 0; }
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 14px 22px;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(2, 203, 255, 0.30);
  border-radius: 999px;
  background-color: #192D41;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary::-webkit-details-marker { display: none; }
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary::marker { content: ""; }
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__heading {
  font-family: Barlow, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #02CBFF;
  transition: color 0.18s ease;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__item[open] .prc-p376-why-acc__summary,
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary:hover {
  border-color: #FF0071;
  background-color: #FF0071;
  box-shadow: 0 10px 26px rgba(255, 0, 113, 0.28);
}
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__item[open] .prc-p376-why-acc__heading,
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary:hover .prc-p376-why-acc__heading { color: #FFFFFF; }
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__content { padding: 12px 2px 2px; }
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__content > div {
  border: 1px solid rgba(2, 203, 255, 0.20);
  border-radius: 18px;
  background-color: rgba(25, 45, 65, 0.85);
  padding: 20px;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__content p {
  margin: 0;
  font-family: Barlow, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}
@media (prefers-reduced-motion: reduce) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-why-acc__summary { transition: none; }
}


/* ===================================================================
 * 7. Reduced-motion respect
 * -------------------------------------------------------------------
 * Hover transforms/transitions are decorative; honour the OS preference.
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card,
  body:is(.page-id-376,.page-id-2826) .prc-p376-tile,
  body:is(.page-id-376,.page-id-2826) .prc-p376-venn__circle,
  body:is(.page-id-376,.page-id-2826) .prc-p376-tile__cta {
    transition: none;
  }
  body:is(.page-id-376,.page-id-2826) .prc-p376-usp-card:hover,
  body:is(.page-id-376,.page-id-2826) .prc-p376-tile:hover {
    transform: none;
  }
}

/* ===== PORT-6 (JJ round 2): decramp hero SAP-Certified badge =====
   Was inline margin:14px 0 2px → only 2px above the CTA row (cramped).
   Give it rhythm-aligned spacing + a thin cyan hairline that frames it
   as a deliberate proof block. Scoped to post 376. Logo image untouched. */
body:is(.page-id-376,.page-id-2826) .prc-p376-hero__cert {
  margin: 30px 0 40px 0 !important;
  padding-top: 22px;
  border-top: 1px solid rgba(2,203,255,0.22);
  display: block;
  max-width: 100%;
}
body:is(.page-id-376,.page-id-2826) .prc-p376-hero__cert img {
  max-width: 200px !important;
  height: auto;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  body:is(.page-id-376,.page-id-2826) .prc-p376-hero__cert { margin: 26px 0 32px 0 !important; padding-top: 18px; }
  body:is(.page-id-376,.page-id-2826) .prc-p376-hero__cert img { max-width: 170px !important; }
}