/* PLAN 2 CONSULTING 1.4.0 — GLOBAL TILE SYSTEM
   Visual master: /uber-mich/
   One CSS geometry for all tile areas. No JS reflow, no container-query sizing.
*/

/* ---------------------------------------------------------------------
   1. GLOBAL CARD GEOMETRY
   --------------------------------------------------------------------- */
body.p2c :is(
  .tile-grid,
  .insight-grid,
  .service-teasers,
  .collab-teasers,
  .standard-card-grid,
  .all-insights
){
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--p2c-gap,18px)!important;
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
}

/* Every real card is a clean grid item. This explicitly neutralises all
   older width / justify-self / container-query rules in p2c.css. */
body.p2c :is(
  .tile-grid,
  .insight-grid,
  .service-teasers,
  .collab-teasers,
  .standard-card-grid,
  .all-insights
) > :is(.tile,.insight,.standard-card,.service-teaser){
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  min-height:330px!important;
  margin:0!important;
  grid-row:auto!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  container-type:normal!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* Master rhythm from Über mich: 8/4, then 4/8. */
body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .wide{
  grid-column:span 8!important;
}
body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .narrow{
  grid-column:span 4!important;
}

/* Insights do not carry wide/narrow classes, so they get the same rhythm
   by position: 8/4, 4/8, 8/4, 4/8 ... */
body.p2c :is(.insight-grid,.all-insights) > .insight{
  grid-column:span 4!important;
}
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+1),
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n){
  grid-column:span 8!important;
}
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+2),
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+3){
  grid-column:span 4!important;
}

/* ---------------------------------------------------------------------
   2. ONE TILE LOOK / ONE HEADLINE SIZE
   --------------------------------------------------------------------- */
body.p2c .tile,
body.p2c .standard-card.tile{
  display:flex!important;
  flex-direction:column!important;
  position:relative!important;
  padding:36px!important;
  border-radius:var(--p2c-radius,6px)!important;
}

/* Same title scale on every tile, independent of width, section or browser. */
body.p2c .tile > h2,
body.p2c .tile > h3,
body.p2c .standard-card.tile > h2,
body.p2c .standard-card.tile > h3,
body.p2c .question.wide > h3,
body.p2c .question.narrow > h3,
body.p2c .use > h3,
body.p2c .insight:first-child > h3,
body.p2c .insight:not(:first-child) > h3{
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:clamp(42px,3.65vw,64px)!important;
  font-weight:900!important;
  line-height:.96!important;
  letter-spacing:-.035em!important;
  max-width:100%!important;
  margin-bottom:30px!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
}

body.p2c .tile .eyebrow{margin-bottom:38px!important}
body.p2c .tile-bottom{margin-top:auto!important;width:100%!important}
body.p2c .tile-bottom p{max-width:620px!important}

/* Keep direct decorative pseudo-elements from becoming visual phantom cards. */
body.p2c .tile::before,
body.p2c .tile::after,
body.p2c .insight::before,
body.p2c .insight::after{
  content:none!important;
  display:none!important;
}

/* ---------------------------------------------------------------------
   3. SERVICE / COLLABORATION DETAILS
   Detail cards stay full width. Only their teaser grids use 8/4 rhythm.
   --------------------------------------------------------------------- */
body.p2c .service-detail-list,
body.p2c .collab-detail-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:18px!important;
}
body.p2c .service-detail-list > .tile,
body.p2c .collab-detail-list > .tile,
body.p2c .service-detail,
body.p2c .collab-detail{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:340px!important;
  container-type:normal!important;
}

/* ---------------------------------------------------------------------
   4. APPROVED PRACTICE BLOCK — preserve exactly this stable geometry
   --------------------------------------------------------------------- */
body.p2c .proof{overflow:hidden!important}
body.p2c .proof>.wrap{display:block!important}
body.p2c .proof .section-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:48px!important;
  width:100%!important;
}
body.p2c .proof .section-heading .text-link{justify-self:end!important;white-space:nowrap!important}
body.p2c .proof-list{width:100%!important;max-width:none!important}
body.p2c .proof-row{
  display:grid!important;
  grid-template-columns:64px minmax(220px,320px) minmax(0,1fr)!important;
  grid-template-areas:"number topic copy"!important;
  gap:32px!important;
  align-items:start!important;
  width:100%!important;
  padding:38px 0!important;
}
body.p2c .proof-row>.proof-number{grid-area:number!important}
body.p2c .proof-row>h3{grid-area:topic!important;margin:0!important;word-break:normal!important}
body.p2c .proof-row>p{grid-area:copy!important;width:100%!important;max-width:680px!important;margin:0!important;font-size:18px!important;line-height:1.55!important;word-break:normal!important}

/* ---------------------------------------------------------------------
   5. NAVIGATION / FORM TYPOGRAPHY
   --------------------------------------------------------------------- */
body.p2c #main-nav>.nav-insights>summary,
body.p2c #main-nav>.nav-insights>summary:hover,
body.p2c #main-nav>.nav-insights>summary:focus-visible,
body.p2c #main-nav>.nav-insights[open]>summary,
body.p2c #main-nav>.nav-insights.is-current>summary{
  color:var(--p2c-bone)!important;
  opacity:1!important;
}
/* Orange only as the small state marker, never as the word Insights. */
body.p2c #main-nav>.nav-insights.is-current>summary::before,
body.p2c #main-nav>.nav-insights[open]>summary::before{color:var(--p2c-orange)!important}

body.p2c.contact-page .p2-form.contact-form .form-step legend,
body.p2c.contact-page .p2-form.contact-form h2,
body.p2c.contact-page .p2-form.contact-form h3{
  font-family:'IBM Plex Sans',sans-serif!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
}
body.p2c.contact-page .p2-form.contact-form .field-label{font-weight:400!important}

/* ---------------------------------------------------------------------
   6. PROJECTS TEMPORARILY HIDDEN
   Page remains intact and can be re-enabled later.
   --------------------------------------------------------------------- */
body.p2c a[href*="/projekte/"]{display:none!important}

/* ---------------------------------------------------------------------
   7. RESPONSIVE — deterministic across Safari / Chrome
   --------------------------------------------------------------------- */
@media (max-width:1023px){
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .wide{grid-column:span 4!important}
  body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .narrow{grid-column:span 2!important}
  body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+1),
  body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n){grid-column:span 4!important}
  body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+2),
  body.p2c :is(.insight-grid,.all-insights) > .insight:nth-child(4n+3){grid-column:span 2!important}
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3{font-size:clamp(38px,5vw,56px)!important}
  body.p2c .proof-row{grid-template-columns:48px minmax(180px,250px) minmax(0,1fr)!important;gap:24px!important}
}

@media (max-width:767px){
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > :is(.tile,.insight,.standard-card,.service-teaser,.wide,.narrow){
    grid-column:1/-1!important;
    min-height:280px!important;
  }
  body.p2c .tile,
  body.p2c .standard-card.tile{padding:28px!important}
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3,
  body.p2c .question.wide > h3,
  body.p2c .question.narrow > h3,
  body.p2c .use > h3,
  body.p2c .insight:first-child > h3,
  body.p2c .insight:not(:first-child) > h3{
    font-size:clamp(36px,10vw,50px)!important;
  }
  body.p2c .proof .section-heading{grid-template-columns:1fr!important;gap:22px!important}
  body.p2c .proof .section-heading .text-link{justify-self:start!important}
  body.p2c .proof-row{grid-template-columns:34px minmax(0,1fr)!important;grid-template-areas:"number topic" ". copy"!important;gap:12px 16px!important;padding:28px 0!important}
  body.p2c .proof-row>p{font-size:17px!important}
}


/* =====================================================================
   PLAN 2 CONSULTING 1.4.1 — FINAL TILE MASTER
   Reference: /uber-mich/
   Robust 3-column geometry: 2/3 + 1/3, then 1/3 + 2/3.
   Tile titles: IBM Plex Sans Regular, never bold/italic, same on every card.
   ===================================================================== */

/* Kill any empty direct wrappers WordPress may inject between linked cards. */
body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > p:empty,
body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > div:empty{
  display:none!important;
}

/* Three equal columns are enough for the visual 8/4 rhythm and avoid
   implicit / phantom columns across Safari and Chromium. */
body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-columns:0!important;
  grid-auto-flow:row!important;
  gap:var(--p2c-gap,18px)!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}

/* Classed tiles: wide = two thirds, narrow = one third. Natural source
   order wide/narrow/narrow/wide creates exactly the Über-mich rhythm. */
body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .wide{
  grid-column:span 2!important;
}
body.p2c :is(.tile-grid,.service-teasers,.collab-teasers,.standard-card-grid) > .narrow{
  grid-column:span 1!important;
}

/* Insights have no wide/narrow classes. nth-of-type ignores stray <p>
   elements and therefore remains stable even with wpautop markup. */
body.p2c :is(.insight-grid,.all-insights) > .insight{
  grid-column:span 1!important;
}
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-of-type(4n+1),
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-of-type(4n){
  grid-column:span 2!important;
}
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-of-type(4n+2),
body.p2c :is(.insight-grid,.all-insights) > .insight:nth-of-type(4n+3){
  grid-column:span 1!important;
}

/* One title treatment everywhere. No Barlow Black, no bold, no italic,
   no width-dependent/container-query typography. */
body.p2c .tile > h2,
body.p2c .tile > h3,
body.p2c .standard-card.tile > h2,
body.p2c .standard-card.tile > h3,
body.p2c .question.wide > h3,
body.p2c .question.narrow > h3,
body.p2c .use > h3,
body.p2c .insight:first-child > h3,
body.p2c .insight:not(:first-child) > h3,
body.p2c .generic-overview .standard-card.tile h3,
body.p2c .generic-overview .standard-card.tile.use h3,
body.p2c .tile-grid > .tile h3{
  font-family:'IBM Plex Sans',sans-serif!important;
  font-size:clamp(36px,3.35vw,58px)!important;
  font-weight:400!important;
  font-style:normal!important;
  font-variation-settings:'wght' 400!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  text-transform:none!important;
  max-width:100%!important;
  margin:0 0 30px!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
}

/* Same card dimensions regardless of width or browser. */
body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > :is(.tile,.insight,.standard-card,.service-teaser){
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:330px!important;
  height:auto!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  container-type:normal!important;
  box-sizing:border-box!important;
}

@media(max-width:1023px){
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3,
  body.p2c .use > h3,
  body.p2c .insight > h3{
    font-size:clamp(32px,4.6vw,48px)!important;
  }
}

@media(max-width:767px){
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > :is(.tile,.insight,.standard-card,.service-teaser,.wide,.narrow){
    grid-column:1!important;
    min-height:280px!important;
  }
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3,
  body.p2c .use > h3,
  body.p2c .insight > h3{
    font-size:clamp(30px,8vw,42px)!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.2 — HOME PAGE TILE CLEANUP
   Startseite בלבד: only real cards participate in the card grids.
   Reference remains /uber-mich/. The proof/praxis block is untouched.
   ===================================================================== */

/* Home grid geometry is explicit and independent of legacy rules. */
body.home.p2c #arbeitsweise .tile-grid,
body.home.p2c #einsatz .tile-grid,
body.home.p2c #insights .insight-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  gap:var(--p2c-gap,18px)!important;
  width:100%!important;
}

/* Any surviving non-card direct child must not become a grid item. */
body.home.p2c #arbeitsweise .tile-grid > :not(.tile),
body.home.p2c #einsatz .tile-grid > :not(.tile),
body.home.p2c #insights .insight-grid > :not(.tile){
  display:none!important;
}

/* Real home cards only. */
body.home.p2c #arbeitsweise .tile-grid > .tile,
body.home.p2c #einsatz .tile-grid > .tile,
body.home.p2c #insights .insight-grid > .tile{
  display:flex!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
}

/* Arbeitsweise: 8/4. */
body.home.p2c #arbeitsweise .tile-grid > .tile:nth-of-type(1){grid-column:1 / span 8!important}
body.home.p2c #arbeitsweise .tile-grid > .tile:nth-of-type(2){grid-column:9 / span 4!important}

/* Zusammenarbeit: 8/4 then 4/8. */
body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(1){grid-column:1 / span 8!important}
body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(2){grid-column:9 / span 4!important}
body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(3){grid-column:1 / span 4!important}
body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(4){grid-column:5 / span 8!important}

/* Start-page insights: 8/4 then 4/8. */
body.home.p2c #insights .insight-grid > .tile:nth-of-type(1){grid-column:1 / span 8!important}
body.home.p2c #insights .insight-grid > .tile:nth-of-type(2){grid-column:9 / span 4!important}
body.home.p2c #insights .insight-grid > .tile:nth-of-type(3){grid-column:1 / span 4!important}
body.home.p2c #insights .insight-grid > .tile:nth-of-type(4){grid-column:5 / span 8!important}

@media(max-width:1023px){
  body.home.p2c #arbeitsweise .tile-grid,
  body.home.p2c #einsatz .tile-grid,
  body.home.p2c #insights .insight-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  body.home.p2c #arbeitsweise .tile-grid > .tile:nth-of-type(1),
  body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(1),
  body.home.p2c #insights .insight-grid > .tile:nth-of-type(1){grid-column:1 / span 4!important}
  body.home.p2c #arbeitsweise .tile-grid > .tile:nth-of-type(2),
  body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(2),
  body.home.p2c #insights .insight-grid > .tile:nth-of-type(2){grid-column:5 / span 2!important}
  body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(3),
  body.home.p2c #insights .insight-grid > .tile:nth-of-type(3){grid-column:1 / span 2!important}
  body.home.p2c #einsatz .tile-grid > .tile:nth-of-type(4),
  body.home.p2c #insights .insight-grid > .tile:nth-of-type(4){grid-column:3 / span 4!important}
}

@media(max-width:767px){
  body.home.p2c #arbeitsweise .tile-grid,
  body.home.p2c #einsatz .tile-grid,
  body.home.p2c #insights .insight-grid{grid-template-columns:1fr!important}
  body.home.p2c #arbeitsweise .tile-grid > .tile,
  body.home.p2c #einsatz .tile-grid > .tile,
  body.home.p2c #insights .insight-grid > .tile{grid-column:1!important}
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.3 — GLOBAL PHANTOM-TILE CLEANUP
   Same proven rule as the 1.4.2 home-page fix, now for all pages except
   the already-correct /uber-mich/ master page.
   ===================================================================== */
body.p2c:not(.page-id-0) :is(.tile-grid,.insight-grid,.service-detail-list,.collab-detail-list) > :not(.tile){
  display:none!important;
}

/* Only genuine tile elements participate in card layouts. */
body.p2c :is(.tile-grid,.insight-grid,.service-detail-list,.collab-detail-list) > .tile{
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}


/* =====================================================================
   PLAN 2 CONSULTING 1.4.4 — GLOBAL GENUINE-CARD GUARD
   JS rebuilds the grids. CSS ensures any pre-JS / failed-repair remnants
   cannot become visible grid cells in Safari or Chromium.
   ===================================================================== */
body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights,.service-detail-list,.collab-detail-list) > :not(.tile){
  display:none!important;
}
body.p2c .tile:not(:has(h2,h3)){
  display:none!important;
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.5 — RESPONSIVE CARD SAFETY
   Below desktop width, never squeeze 8/4 cards into narrow columns.
   All card systems collapse to a single clean column.
   ===================================================================== */
@media (max-width:1023px){
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:auto!important;
    grid-auto-flow:row!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > :is(.tile,.insight,.standard-card,.service-teaser,.wide,.narrow){
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    overflow:hidden!important;
  }
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3,
  body.p2c .use > h3,
  body.p2c .insight > h3{
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
  }

  /* Home had explicit 6-column tablet positions in 1.4.2. Neutralise them. */
  body.home.p2c #arbeitsweise .tile-grid,
  body.home.p2c #einsatz .tile-grid,
  body.home.p2c #insights .insight-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.home.p2c #arbeitsweise .tile-grid > .tile,
  body.home.p2c #einsatz .tile-grid > .tile,
  body.home.p2c #insights .insight-grid > .tile{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-width:767px){
  body.p2c .tile,
  body.p2c .standard-card.tile{
    padding:24px!important;
  }
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights) > :is(.tile,.insight,.standard-card,.service-teaser){
    min-height:0!important;
  }
  body.p2c .tile > h2,
  body.p2c .tile > h3,
  body.p2c .standard-card.tile > h2,
  body.p2c .standard-card.tile > h3,
  body.p2c .use > h3,
  body.p2c .insight > h3{
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1.02!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.6 — LEISTUNGEN = SAME TILE GEOMETRY AS HOME
   /marketingberatung-kiel/ uses the proven homepage card rhythm exactly.
   No clipped cards, no service-specific sizing, no legacy overflow.
   ===================================================================== */
body.p2c.marketing-overview-page .service-overview .service-teasers,
body.p2c.marketing-overview-page .employment .tile-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:var(--p2c-gap,18px)!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
}

body.p2c.marketing-overview-page .service-overview .service-teasers > .tile,
body.p2c.marketing-overview-page .employment .tile-grid > .tile{
  display:flex!important;
  flex-direction:column!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:330px!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}

/* Row 1 = 8/4, row 2 = 4/8 — identical to the homepage. */
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(1),
body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(1){grid-column:1 / span 8!important}
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(2),
body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(2){grid-column:9 / span 4!important}
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(3),
body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(3){grid-column:1 / span 4!important}
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(4),
body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(4){grid-column:5 / span 8!important}

/* Do not let old service rules crop headings or body copy. */
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h3,
body.p2c.marketing-overview-page .employment .tile-grid > .tile h3,
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile .tile-bottom,
body.p2c.marketing-overview-page .employment .tile-grid > .tile .tile-bottom{
  max-width:100%!important;
  overflow:visible!important;
}

/* Detailed service cards remain deliberately full-width and expand to content. */
body.p2c.marketing-overview-page .service-detail-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--p2c-gap,18px)!important;
  width:100%!important;
  overflow:visible!important;
}
body.p2c.marketing-overview-page .service-detail-list > .tile{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Tablet + mobile: never preserve a narrow 1/3 service card. */
@media(max-width:1023px){
  body.p2c.marketing-overview-page .service-overview .service-teasers,
  body.p2c.marketing-overview-page .employment .tile-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-height:280px!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.7 — LONG TILE HEADINGS WRAP INSIDE THE CARD
   Keep the 1.4.6 geometry, but allow long German compound headings to
   wrap cleanly instead of being clipped at the card edge.
   ===================================================================== */
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h2,
body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h3,
body.p2c.marketing-overview-page .employment .tile-grid > .tile h2,
body.p2c.marketing-overview-page .employment .tile-grid > .tile h3{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  hyphens:auto!important;
  -webkit-hyphens:auto!important;
  text-wrap:balance!important;
  overflow:visible!important;
}

/* The narrow 1/3 cards need slightly more compact heading type so words
   such as MARKETINGSTEUERUNG remain readable and wrap in 2–3 lines. */
@media(min-width:1024px){
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(2) h3,
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile:nth-of-type(3) h3,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(2) h3,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile:nth-of-type(3) h3{
    font-size:clamp(34px,2.65vw,48px)!important;
    line-height:1.02!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.8 — REAL WRAP + HOME RESPONSIVE HARD RESET
   Long tile headings receive genuine break opportunities via JS. The
   homepage is forced to one card per row below desktop, regardless of
   legacy 12-column declarations elsewhere in the stylesheet.
   ===================================================================== */
body.p2c .tile :is(h2,h3){
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:manual!important;
  -webkit-hyphens:manual!important;
}
body.p2c .tile :is(h2,h3) wbr{display:inline!important}

@media(max-width:1023px){
  body.home.p2c :is(#arbeitsweise,#einsatz,#insights) :is(.tile-grid,.insight-grid){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:auto!important;
    grid-auto-flow:row!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  body.home.p2c :is(#arbeitsweise,#einsatz,#insights) :is(.tile-grid,.insight-grid) > .tile{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.4.9 — GLOBAL RESPONSIVE CARD RULE
   Desktop >= 1024px remains exactly as in 1.4.8.
   Tablet/mobile <= 1023px: every card grid is strictly one column and
   every card headline uses the same responsive type scale.
   ===================================================================== */
@media (max-width:1023px){
  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list
  ){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:auto!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list
  ) > :is(.tile,.insight,.standard-card,.service-teaser,.wide,.narrow){
    grid-column:1 / -1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* One headline size for every card, regardless of wide/narrow. */
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser) > :is(h2,h3),
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser) :is(h2,h3){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-family:'IBM Plex Sans',sans-serif!important;
    font-size:clamp(34px,5.4vw,46px)!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:manual!important;
    -webkit-hyphens:manual!important;
    text-wrap:balance!important;
  }
}

@media (max-width:767px){
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser) > :is(h2,h3),
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser) :is(h2,h3){
    font-size:clamp(30px,8.8vw,40px)!important;
    line-height:1.03!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.5.0 — RESPONSIVE SINGLE-CARD HARD RULE
   Desktop >= 1024px is untouched.
   Below 1024px every card collection becomes a vertical flex stack.
   Flex is used deliberately here so no legacy grid-column rule can place
   two cards next to each other.
   ===================================================================== */
@media (max-width:1023px){
  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ){
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:var(--p2c-gap,18px)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ) > *{
    flex:0 0 auto!important;
    order:initial!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
    overflow:visible!important;
  }

  /* One consistent responsive card headline size, regardless of wide/narrow. */
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser,.service-field) :is(h2,h3){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-family:'IBM Plex Sans',sans-serif!important;
    font-size:clamp(30px,7.2vw,44px)!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:manual!important;
    -webkit-hyphens:manual!important;
  }
}

@media (max-width:560px){
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser,.service-field) :is(h2,h3){
    font-size:clamp(28px,8.6vw,38px)!important;
  }
}


/* =====================================================================
   PLAN 2 CONSULTING 1.5.1 — CANONICAL MOBILE SINGLE-CARD RULE
   The 1.4.6 Leistungen desktop selectors are more specific than the
   generic responsive rules. Override those selectors at the same/higher
   specificity below 1024px. Desktop >=1024px is intentionally untouched.
   ===================================================================== */
@media (max-width:1023px){
  /* Leistungen / Aufgabenfelder: exactly one card per row. */
  body.p2c.marketing-overview-page .service-overview .service-teasers,
  body.p2c.marketing-overview-page .employment .tile-grid,
  body.p2c.marketing-overview-page .service-detail-list,
  body.p2c.marketing-overview-page .service-fields{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:var(--p2c-gap,18px)!important;
    grid-template-columns:none!important;
    grid-auto-columns:auto!important;
    grid-auto-flow:row!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile,
  body.p2c.marketing-overview-page .service-detail-list > .tile,
  body.p2c.marketing-overview-page .service-fields > .tile{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    grid-column:1 / -1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    overflow:visible!important;
  }

  /* Same responsive headline scale on every Aufgabenfeld card. */
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h2,
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h3,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile h2,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile h3,
  body.p2c.marketing-overview-page .service-detail-list > .tile h2,
  body.p2c.marketing-overview-page .service-detail-list > .tile h3{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-family:'IBM Plex Sans',sans-serif!important;
    font-size:clamp(30px,7.2vw,44px)!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
    overflow:visible!important;
  }

  /* Body copy must use the whole card width; no narrow desktop columns. */
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile :is(p,.tile-bottom),
  body.p2c.marketing-overview-page .employment .tile-grid > .tile :is(p,.tile-bottom){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}

@media (max-width:560px){
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h2,
  body.p2c.marketing-overview-page .service-overview .service-teasers > .tile h3,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile h2,
  body.p2c.marketing-overview-page .employment .tile-grid > .tile h3,
  body.p2c.marketing-overview-page .service-detail-list > .tile h2,
  body.p2c.marketing-overview-page .service-detail-list > .tile h3{
    font-size:clamp(28px,8.6vw,38px)!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.5.2 — RESPONSIVE MASTER = /uber-mich/
   CSS fallback for the JS-enforced responsive master. Desktop unchanged.
   ===================================================================== */
@media (max-width:1023px){
  body.p2c:not(.page-id-0) :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights,.service-detail-list,.collab-detail-list,.service-fields){
    min-width:0!important;
  }
  body.p2c :is(.tile-grid,.insight-grid,.service-teasers,.collab-teasers,.standard-card-grid,.all-insights,.service-detail-list,.collab-detail-list,.service-fields) > .tile{
    box-sizing:border-box!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.5.2 — RESPONSIVE MASTER = /uber-mich/
   Desktop >= 1024px remains untouched.
   Below 1024px every card collection follows the same single-column
   behaviour as the approved /uber-mich/ tile section.
   ===================================================================== */
@media (max-width:1023px){
  /* A normal block stack is intentional: no legacy grid/flex rule can
     place a second card beside the first one. */
  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ) > :is(.tile,.insight,.standard-card,.service-teaser,.service-field,.wide,.narrow){
    display:flex!important;
    flex-direction:column!important;
    float:none!important;
    position:relative!important;
    grid-column:auto!important;
    grid-row:auto!important;
    flex:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    min-height:290px!important;
    margin:0 0 16px 0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
  }
  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ) > :is(.tile,.insight,.standard-card,.service-teaser,.service-field,.wide,.narrow):last-child{
    margin-bottom:0!important;
  }

  /* Same headline scale for EVERY responsive card — wide/narrow no longer
     changes typography. */
  body.p2c :is(.tile,.insight,.standard-card,.service-teaser,.service-field) :is(h2,h3),
  body.p2c :is(.question.wide,.question.narrow,.use) > h3{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-family:'IBM Plex Sans',sans-serif!important;
    font-size:clamp(34px,5.2vw,48px)!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
    overflow:visible!important;
  }

  body.p2c :is(.tile,.insight,.standard-card,.service-teaser,.service-field) :is(p,.tile-bottom,.tile-details){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width:767px){
  body.p2c :is(
    .tile-grid,
    .insight-grid,
    .service-teasers,
    .collab-teasers,
    .standard-card-grid,
    .all-insights,
    .service-detail-list,
    .collab-detail-list,
    .service-fields
  ) > :is(.tile,.insight,.standard-card,.service-teaser,.service-field,.wide,.narrow){
    min-height:290px!important;
    padding:26px!important;
  }

  body.p2c :is(.tile,.insight,.standard-card,.service-teaser,.service-field) :is(h2,h3),
  body.p2c :is(.question.wide,.question.narrow,.use) > h3{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:1.02!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.5.3 — H1 ALIGNMENT ONLY
   Unify the generic overview H1 (e.g. "Was soll sich verändern?") with
   the established page-hero H1 scale. No layout/card/responsive changes.
   ===================================================================== */
body.p2c .generic-overview .section-heading > h1{
  font-family:'Barlow Condensed',sans-serif!important;
  font-weight:900!important;
  font-size:var(--p2c-type-hero)!important;
  line-height:.94!important;
  letter-spacing:-.02em!important;
  max-width:1180px!important;
}

@media (max-width:767px){
  body.p2c .generic-overview .section-heading > h1{
    font-size:var(--p2c-type-hero)!important;
    line-height:.94!important;
    letter-spacing:-.02em!important;
  }
}

/* =====================================================================
   PLAN 2 CONSULTING 1.5.4 — CONTACT H1 ALIGNMENT ONLY
   Make the contact-page H1 use the established site-wide hero H1 scale.
   No layout, card, spacing, navigation or responsive-grid changes.
   ===================================================================== */
body.p2c.contact-page .page-hero > h1,
body.p2c.contact-page .page-hero h1{
  font-family:'Barlow Condensed',sans-serif!important;
  font-weight:900!important;
  font-size:var(--p2c-type-hero)!important;
  line-height:.94!important;
  letter-spacing:-.02em!important;
  max-width:1180px!important;
}

@media (max-width:767px){
  body.p2c.contact-page .page-hero > h1,
  body.p2c.contact-page .page-hero h1{
    font-size:var(--p2c-type-hero)!important;
    line-height:.94!important;
    letter-spacing:-.02em!important;
  }
}