/* Praxoria Startseite – v562: Warum Praxoria neu kalibriert.
   Ziel: eigenständig, aber nicht schwer; redaktioneller Qualitätsbogen statt Karte/Matrix. */

html body.home.homeRefinedV562 .whyBand{
  --why-hair: color-mix(in oklab, var(--border) 72%, transparent);
  --why-muted: color-mix(in oklab, var(--ink) 64%, var(--muted));
  margin-top: clamp(62px, 7vw, 104px) !important;
  padding: clamp(54px, 6.2vw, 86px) 0 clamp(58px, 6.5vw, 88px) !important;
  background:
    radial-gradient(840px 280px at 8% 4%, color-mix(in oklab, var(--accent) 4.5%, transparent), transparent 68%),
    radial-gradient(720px 260px at 95% 20%, color-mix(in oklab, var(--accent2) 3.5%, transparent), transparent 72%) !important;
  overflow:visible !important;
}

html body.home.homeRefinedV562 .whyBand::before,
html body.home.homeRefinedV562 .whyBand::after{
  display:none !important;
}

html body.home.homeRefinedV562 .whyTitleBlock{
  display:grid !important;
  grid-template-columns:minmax(0, 760px) minmax(220px, 440px) !important;
  gap: clamp(28px, 6vw, 88px) !important;
  align-items:end !important;
  margin-bottom: clamp(34px, 4.8vw, 64px) !important;
}

html body.home.homeRefinedV562 .whyTitleBlock h2{
  font-size: clamp(44px, 5vw, 72px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  margin:0 0 clamp(16px, 2vw, 24px) !important;
}

html body.home.homeRefinedV562 .whyTitleBlock h2::after{
  width:min(300px, 54vw) !important;
  height:2px !important;
  opacity:.74 !important;
}

html body.home.homeRefinedV562 .whyTitleBlock .sub.homeLead{
  max-width: 780px !important;
  font-size: clamp(18px, 1.32vw, 23px) !important;
  line-height:1.62 !important;
  color: color-mix(in oklab, var(--ink) 82%, var(--muted)) !important;
}

html body.home.homeRefinedV562 .whyTitleBlock .sub.homeLead .em{
  box-shadow: inset 0 -.36em 0 color-mix(in oklab, var(--accent) 10%, transparent) !important;
}
html body.home.homeRefinedV562 .whyTitleBlock .sub.homeLead .em:nth-of-type(2){
  box-shadow: inset 0 -.36em 0 color-mix(in oklab, var(--accent3) 12%, transparent) !important;
}
html body.home.homeRefinedV562 .whyTitleBlock .sub.homeLead .em:nth-of-type(3){
  box-shadow: inset 0 -.36em 0 color-mix(in oklab, var(--accent2) 11%, transparent) !important;
}

html body.home.homeRefinedV562 .whyLineStage{
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
  width:min(100%, 420px) !important;
  height:82px !important;
  opacity:.23 !important;
  transform: translateY(2px) !important;
  pointer-events:none !important;
}
html body.home.homeRefinedV562 .whyBand.isFlowComplete .whyLineStage{ opacity:.34 !important; }
html body.home.homeRefinedV562 .whyDrawLine path{
  stroke-width:4.2 !important;
  opacity:.28 !important;
  stroke-linecap:round !important;
}

/* Der Qualitätsbereich ist kein Container und keine dritte Schrittstrecke. */
html body.home.homeRefinedV562 .whyPillars{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  grid-template-rows:auto !important;
  gap:0 !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:1px solid var(--why-hair) !important;
  border-bottom:1px solid var(--why-hair) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html body.home.homeRefinedV562 .whyPillars::before,
html body.home.homeRefinedV562 .whyPillars::after{
  display:none !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar,
html body.home.homeRefinedV562 .whyPillars .pillar.p1,
html body.home.homeRefinedV562 .whyPillars .pillar.p2,
html body.home.homeRefinedV562 .whyPillars .pillar.p3{
  --pillar-accent: var(--accent);
  position:relative !important;
  z-index:1 !important;
  grid-column:auto !important;
  grid-row:auto !important;
  display:flex !important;
  flex-direction:column !important;
  min-height: clamp(360px, 31vw, 460px) !important;
  padding: clamp(34px, 4.4vw, 58px) clamp(28px, 3.5vw, 52px) clamp(30px, 3.6vw, 48px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar + .pillar{
  border-left:1px solid color-mix(in oklab, var(--border) 58%, transparent) !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar::before{
  content:"" !important;
  position:absolute !important;
  left:clamp(28px, 3.5vw, 52px) !important;
  right:clamp(28px, 3.5vw, 52px) !important;
  top:-1px !important;
  width:auto !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, var(--pillar-accent), color-mix(in oklab, var(--pillar-accent) 18%, transparent) 72%, transparent) !important;
  opacity:.72 !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  right:clamp(26px, 3vw, 46px) !important;
  top:clamp(28px, 3vw, 46px) !important;
  width:clamp(64px, 7vw, 104px) !important;
  height:clamp(64px, 7vw, 104px) !important;
  border-radius:50% !important;
  border:1px solid color-mix(in oklab, var(--pillar-accent) 10%, transparent) !important;
  background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--pillar-accent) 4.2%, transparent), transparent 68%) !important;
  opacity:.32 !important;
  pointer-events:none !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar.p1{ --pillar-accent: var(--accent) !important; }
html body.home.homeRefinedV562 .whyPillars .pillar.p2{ --pillar-accent: var(--accent3) !important; }
html body.home.homeRefinedV562 .whyPillars .pillar.p3{ --pillar-accent: var(--accent2) !important; }

@media (hover:hover){
  html body.home.homeRefinedV562 .whyPillars .pillar:hover{
    transform:none !important;
    box-shadow:none !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar:hover::after{
    opacity:.44 !important;
    transform:none !important;
  }
}

html body.home.homeRefinedV562 .whyPillars .pillar .k{
  position:relative !important;
  z-index:1 !important;
  margin:0 0 clamp(18px, 2.2vw, 26px) !important;
  font-size: clamp(12px, .78vw, 13.5px) !important;
  line-height:1.1 !important;
  letter-spacing:.23em !important;
  font-weight:850 !important;
  color: color-mix(in oklab, var(--pillar-accent) 78%, var(--ink)) !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar h3{
  position:relative !important;
  z-index:1 !important;
  max-width: 13.5em !important;
  min-height:2.35em !important;
  margin:0 !important;
  font-size: clamp(26px, 2vw, 34px) !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar.p1 h3{
  font-size: clamp(26px, 2vw, 34px) !important;
  max-width:13.5em !important;
}

html body.home.homeRefinedV562 .whyPillars .pillar p{
  position:relative !important;
  z-index:1 !important;
  margin: clamp(18px, 2vw, 26px) 0 0 !important;
  min-height:8.4em !important;
  max-width: 33rem !important;
  font-size: clamp(17px, 1.08vw, 20px) !important;
  line-height:1.58 !important;
  color: color-mix(in oklab, var(--ink) 76%, var(--muted)) !important;
}

html body.home.homeRefinedV562 .whyPillars .pillarMeta{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:.38rem .72rem !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  font-size: clamp(12px, .78vw, 13.6px) !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  color: color-mix(in oklab, var(--ink) 58%, var(--muted)) !important;
}

html body.home.homeRefinedV562 .whyPillars .pillarMeta span{
  display:inline-flex !important;
  align-items:center !important;
  gap:.55em !important;
}
html body.home.homeRefinedV562 .whyPillars .pillarMeta span + span::before{
  content:"" !important;
  width:4px !important;
  height:4px !important;
  border-radius:50% !important;
  background: var(--pillar-accent) !important;
  opacity:.48 !important;
}

html body.home.homeRefinedV562 .whyPillars .pillarPreview{
  position:relative !important;
  z-index:1 !important;
  margin-top: clamp(28px, 3vw, 42px) !important;
  padding-top: clamp(18px, 2vw, 24px) !important;
  border:0 !important;
  border-top:1px solid color-mix(in oklab, var(--pillar-accent) 22%, var(--border) 76%) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body.home.homeRefinedV562 .whyPillars .pillarPreview .pk{
  display:block !important;
  margin:0 0 10px !important;
  font-size: clamp(11px, .72vw, 12px) !important;
  line-height:1.2 !important;
  letter-spacing:.22em !important;
  font-weight:850 !important;
  color: color-mix(in oklab, var(--pillar-accent) 62%, var(--ink)) !important;
}
html body.home.homeRefinedV562 .whyPillars .pillarPreview .pk::before{ display:none !important; }

html body.home.homeRefinedV562 .whyPillars .pillarPreview .pv{
  max-width: 28rem !important;
  font-size: clamp(15.5px, .98vw, 17px) !important;
  line-height:1.46 !important;
  font-weight:720 !important;
  color: color-mix(in oklab, var(--ink) 78%, var(--muted)) !important;
}

html body.home.homeRefinedV562 .whyPillars .pillarPreview .pd{
  margin-top:12px !important;
  font-size: clamp(14.5px, .92vw, 16px) !important;
  line-height:1.44 !important;
}
html body.home.homeRefinedV562 .whyPillars .pillarPreview .pd span{
  font-weight:720 !important;
  color: color-mix(in oklab, var(--ink) 70%, var(--muted)) !important;
  box-shadow:none !important;
}

html body.home.homeRefinedV562 .whyAfter{
  margin-top: clamp(62px, 7vw, 100px) !important;
}

@media (max-width: 1080px){
  html body.home.homeRefinedV562 .whyTitleBlock{
    grid-template-columns:1fr !important;
  }
  html body.home.homeRefinedV562 .whyLineStage{
    justify-self:start !important;
    width:min(100%, 340px) !important;
    height:58px !important;
  }
  html body.home.homeRefinedV562 .whyPillars{
    grid-template-columns:1fr !important;
    border-top:1px solid var(--why-hair) !important;
    border-bottom:1px solid var(--why-hair) !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar,
  html body.home.homeRefinedV562 .whyPillars .pillar.p1,
  html body.home.homeRefinedV562 .whyPillars .pillar.p2,
  html body.home.homeRefinedV562 .whyPillars .pillar.p3{
    min-height:auto !important;
    padding: clamp(30px, 5vw, 42px) 0 !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar + .pillar{
    border-left:0 !important;
    border-top:1px solid color-mix(in oklab, var(--border) 58%, transparent) !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar::before{
    left:0 !important;
    right:auto !important;
    width:min(230px, 52vw) !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar::after{
    display:none !important;
  }
  html body.home.homeRefinedV562 .whyPillars .pillar h3,
  html body.home.homeRefinedV562 .whyPillars .pillar.p1 h3,
  html body.home.homeRefinedV562 .whyPillars .pillar p{
    min-height:0 !important;
    max-width:42rem !important;
  }
}

@media (max-width: 720px){
  html body.home.homeRefinedV562 .whyBand{
    padding-top:40px !important;
  }
  html body.home.homeRefinedV562 .whyTitleBlock h2{
    font-size: clamp(38px, 12vw, 54px) !important;
  }
  html body.home.homeRefinedV562 .whyTitleBlock .sub.homeLead{
    font-size:18px !important;
  }
}