.contao-circles.circle-wrapper{--circle-stage-size:clamp(17.5rem,21vw,21.25rem);align-items:center;display:grid;gap:3.125rem 6.25rem;grid-template-columns:minmax(17.5rem,clamp(18rem,36vw,34rem)) minmax(16rem,1fr);width:100%}
.contao-circles.circle-wrapper .circle-area{align-items:center;block-size:var(--circle-stage-size);display:grid;height:var(--circle-stage-size);inline-size:100%;justify-items:center;min-block-size:0;width:100%}
.contao-circles.circle-wrapper .circle-animation{aspect-ratio:1/1;inline-size:min(100%,var(--circle-stage-size));isolation:isolate;overflow:hidden;position:relative;width:min(100%,var(--circle-stage-size))}
.contao-circles.circle-wrapper .circle{-webkit-appearance:none;appearance:none;background:radial-gradient(circle at center,hsla(0,0%,100%,.18) 0,hsla(0,0%,100%,.08) 40%,hsla(0,0%,100%,.03) 65%,transparent 100%);border:1px solid #fff;border-radius:50%;box-sizing:border-box;color:#fff;cursor:pointer;display:block;font:inherit;font-size:var(--circle-font-size,var(--font-size-subheadline,1.25rem));font-weight:700;height:var(--circle-size,12rem);left:var(--circle-left,50%);line-height:1.05;overflow-wrap:anywhere;padding:0;position:absolute;top:var(--circle-top,50%);transform:translate(-50%,-50%);transition:background .4s,border-color .4s,box-shadow .6s ease,height .28s ease,left .9s cubic-bezier(.25,.8,.25,1),top .9s cubic-bezier(.25,.8,.25,1),width .28s ease;width:var(--circle-size,12rem)}
.contao-circles.circle-wrapper .circle.active{background:radial-gradient(circle at center,rgba(234,255,0,.25) 0,rgba(234,255,0,.12) 35%,rgba(234,255,0,.05) 60%,transparent 100%);border-color:#c6d315;box-shadow:0 0 clamp(1.25rem,8%,2.25rem) rgba(234,255,0,.6);z-index:5}
.contao-circles.circle-wrapper .circle-label{left:var(--circle-label-x,50%);max-width:none;pointer-events:none;position:absolute;text-align:center;top:var(--circle-label-y,50%);transform:translate(-50%,-50%);white-space:nowrap;width:max-content}
.contao-circles.circle-wrapper .pos-top{--circle-label-x:50%;--circle-label-y:40%}
.contao-circles.circle-wrapper .pos-left{--circle-label-x:33%;--circle-label-y:60%}
.contao-circles.circle-wrapper .pos-right{--circle-label-x:66%;--circle-label-y:60%}
.contao-circles.circle-wrapper .text-area{font-size:16px;line-height:1.5;max-width:420px}
.contao-circles.circle-wrapper .text-area .button{margin-top:1.875rem}
.contao-circles.circle-wrapper .content-source{display:none}
@media (max-width:50rem){.contao-circles.circle-wrapper{gap:2rem;grid-template-columns:1fr}.contao-circles.circle-wrapper .circle-area{inline-size:100%;justify-self:center}.contao-circles.circle-wrapper .text-area{max-width:none}}