/* Praxoria Startseite – v560: „Warum Praxoria“ als eigenständiger, hochwertiger Qualitätsmoment. */

html body.home.homeRefinedV560 .whyBand{
  --why-line: color-mix(in oklab, var(--border) 62%, transparent);
  position: relative !important;
  isolation: isolate !important;
  overflow: clip !important;
  margin-top: clamp(58px, 7vw, 104px) !important;
  padding: clamp(42px, 6vw, 86px) 0 clamp(46px, 6vw, 90px) !important;
  border: 0 !important;
  background:
    radial-gradient(900px 360px at 2% 55%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 62%),
    radial-gradient(780px 360px at 96% 46%, color-mix(in oklab, var(--accent2) 7%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 100%) !important;
  box-shadow: none !important;
}

html body.home.homeRefinedV560 .whyBand::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: clamp(24px, 4vw, 54px) max(-120px, -5vw) auto auto !important;
  width: min(48vw, 690px) !important;
  height: clamp(180px, 19vw, 284px) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 18%, transparent),
      color-mix(in oklab, var(--accent3) 10%, transparent) 48%,
      color-mix(in oklab, var(--accent2) 12%, transparent));
  opacity: .34 !important;
  filter: blur(34px) !important;
  transform: rotate(-4deg) !important;
  pointer-events: none !important;
}

html body.home.homeRefinedV560 .whyBand::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border) 78%, transparent) 16%, color-mix(in oklab, var(--border) 70%, transparent) 84%, transparent) !important;
  pointer-events: none !important;
}

html body.home.homeRefinedV560 .whyTitleBlock{
  grid-template-columns: minmax(0, 720px) minmax(220px, 520px) !important;
  align-items: center !important;
  gap: clamp(30px, 8vw, 138px) !important;
  margin-bottom: clamp(34px, 5.5vw, 76px) !important;
}

html body.home.homeRefinedV560 .whyTitleBlock h2{
  font-size: clamp(44px, 5vw, 74px) !important;
  letter-spacing: -.066em !important;
  margin-bottom: clamp(16px, 2.1vw, 24px) !important;
}

html body.home.homeRefinedV560 .whyTitleBlock h2::after{
  width: min(330px, 54vw) !important;
  opacity: .7 !important;
  background: linear-gradient(90deg, var(--accent), var(--accent3), transparent) !important;
}

html body.home.homeRefinedV560 .whyTitleBlock .sub.homeLead{
  max-width: 720px !important;
  font-size: clamp(19px, 1.45vw, 25px) !important;
  line-height: 1.55 !important;
}

html body.home.homeRefinedV560 .whyTitleBlock .sub.homeLead .em::after{
  bottom: .05em !important;
  height: .26em !important;
  opacity: .82 !important;
}

html body.home.homeRefinedV560 .whyLineStage{
  justify-self: end !important;
  width: min(100%, 470px) !important;
  height: clamp(86px, 8vw, 118px) !important;
  opacity: .5 !important;
  transform: translateY(0) rotate(-.5deg) !important;
}

html body.home.homeRefinedV560 .whyDrawLine path{
  stroke-width: 7 !important;
  opacity: .24 !important;
}

html body.home.homeRefinedV560 .whyBand.isFlowComplete .whyLineStage{
  opacity: .62 !important;
}

html body.home.homeRefinedV560 .whyPillars{
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.home.homeRefinedV560 .whyPillars::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  left: clamp(10px, 2vw, 28px) !important;
  right: clamp(10px, 2vw, 28px) !important;
  top: clamp(18px, 2.8vw, 36px) !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 18%, transparent),
    color-mix(in oklab, var(--accent3) 18%, transparent) 50%,
    color-mix(in oklab, var(--accent2) 18%, transparent));
  opacity: .9 !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar{
  --pillar-accent: var(--accent);
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(138px, 1fr) auto auto !important;
  min-height: clamp(430px, 35vw, 510px) !important;
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 3.3vw, 42px) clamp(28px, 3.2vw, 44px) !important;
  border: 1px solid color-mix(in oklab, var(--border) 58%, transparent) !important;
  border-radius: clamp(26px, 2.8vw, 38px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
    radial-gradient(circle at 16% 12%, color-mix(in oklab, var(--pillar-accent) 8%, transparent), transparent 46%) !important;
  box-shadow: 0 24px 70px rgba(20,30,42,.055) !important;
  transform: none !important;
  overflow: hidden !important;
}

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

html body.home.homeRefinedV560 .whyPillars .pillar.p2{
  transform: translateY(clamp(10px, 1.1vw, 18px)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar.p3{
  transform: translateY(clamp(20px, 2vw, 34px)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar::before{
  left: clamp(24px, 3.3vw, 42px) !important;
  top: clamp(22px, 2.7vw, 34px) !important;
  width: clamp(42px, 4.7vw, 72px) !important;
  height: 3px !important;
  opacity: .86 !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar::after{
  content: "01" !important;
  display: block !important;
  position: absolute !important;
  right: clamp(18px, 2.4vw, 32px) !important;
  top: clamp(12px, 1.8vw, 24px) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(68px, 7vw, 118px) !important;
  line-height: .82 !important;
  letter-spacing: -.08em !important;
  color: color-mix(in oklab, var(--pillar-accent) 14%, transparent) !important;
  opacity: .74 !important;
  background: none !important;
  pointer-events: none !important;
  transition: transform .45s ease, opacity .45s ease !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar.p2::after{ content: "02" !important; }
html body.home.homeRefinedV560 .whyPillars .pillar.p3::after{ content: "03" !important; }

@media (hover:hover){
  html body.home.homeRefinedV560 .whyPillars .pillar:hover{
    box-shadow: 0 30px 88px rgba(20,30,42,.075) !important;
  }
  html body.home.homeRefinedV560 .whyPillars .pillar:hover::after{
    transform: translateY(-4px) !important;
    opacity: .92 !important;
  }
}

html body.home.homeRefinedV560 .whyPillars .pillar .k{
  margin: clamp(16px, 2.3vw, 26px) 0 clamp(18px, 2.2vw, 25px) !important;
  font-size: clamp(12px, .86vw, 14px) !important;
  letter-spacing: .25em !important;
  color: color-mix(in oklab, var(--pillar-accent) 76%, var(--ink)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar h3{
  max-width: 12em !important;
  font-size: clamp(26px, 2.35vw, 36px) !important;
  line-height: 1.06 !important;
}

html body.home.homeRefinedV560 .whyPillars .pillar p{
  margin-top: clamp(22px, 2.5vw, 34px) !important;
  font-size: clamp(17px, 1.18vw, 21px) !important;
  line-height: 1.57 !important;
  color: color-mix(in oklab, var(--ink) 78%, var(--muted)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarMeta{
  align-self: end !important;
  margin-top: clamp(24px, 3.2vw, 42px) !important;
  padding-top: clamp(13px, 1.5vw, 18px) !important;
  border-top: 1px solid color-mix(in oklab, var(--pillar-accent) 22%, var(--border) 78%) !important;
  gap: .28rem .72rem !important;
  font-size: clamp(12.5px, .82vw, 14.5px) !important;
  font-weight: 800 !important;
  color: color-mix(in oklab, var(--ink) 65%, var(--muted)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarPreview{
  display: block !important;
  margin-top: clamp(18px, 2.4vw, 28px) !important;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.1vw, 24px) !important;
  border-radius: 22px !important;
  border: 1px solid color-mix(in oklab, var(--pillar-accent) 22%, var(--border) 58%) !important;
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--pillar-accent) 7%, white 72%), rgba(255,255,255,.48)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarPreview .pk{
  margin: 0 0 10px !important;
  font-size: clamp(11px, .78vw, 13px) !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 850 !important;
  color: color-mix(in oklab, var(--pillar-accent) 72%, var(--ink)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarPreview .pv{
  margin: 0 !important;
  max-width: 26rem !important;
  font-size: clamp(16px, 1.08vw, 19px) !important;
  line-height: 1.42 !important;
  font-weight: 830 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarPreview .pd{
  margin-top: 14px !important;
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.42 !important;
  color: color-mix(in oklab, var(--ink) 68%, var(--muted)) !important;
}

html body.home.homeRefinedV560 .whyPillars .pillarPreview .pd span{
  display: inline !important;
  font-weight: 760 !important;
  color: color-mix(in oklab, var(--ink) 76%, var(--muted)) !important;
  text-decoration: none !important;
  box-shadow: inset 0 -.32em 0 color-mix(in oklab, var(--pillar-accent) 12%, transparent) !important;
}

html body.home.homeRefinedV560 .whyAfter{
  margin-top: clamp(82px, 8vw, 128px) !important;
}

@media (max-width: 1080px){
  html body.home.homeRefinedV560 .whyBand{
    overflow: hidden !important;
  }
  html body.home.homeRefinedV560 .whyTitleBlock{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html body.home.homeRefinedV560 .whyPillars{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body.home.homeRefinedV560 .whyPillars::before{
    display: none !important;
  }
  html body.home.homeRefinedV560 .whyPillars .pillar,
  html body.home.homeRefinedV560 .whyPillars .pillar.p2,
  html body.home.homeRefinedV560 .whyPillars .pillar.p3{
    min-height: auto !important;
    transform: none !important;
    grid-template-rows: auto !important;
    padding: clamp(28px, 6vw, 42px) !important;
  }
  html body.home.homeRefinedV560 .whyPillars .pillar + .pillar{
    border-left: 1px solid color-mix(in oklab, var(--border) 58%, transparent) !important;
    border-top: 1px solid color-mix(in oklab, var(--border) 58%, transparent) !important;
  }
  html body.home.homeRefinedV560 .whyPillars .pillarMeta,
  html body.home.homeRefinedV560 .whyPillars .pillarPreview{
    margin-top: 20px !important;
  }
  html body.home.homeRefinedV560 .whyAfter{
    margin-top: clamp(54px, 8vw, 86px) !important;
  }
}

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