.llw-scrollsteps{
  position:relative;
  width:100%;
}

/* 50/50 split */
.llw-grid{
  position:relative;
  display:grid;
  grid-template-columns: 50% 50%;
  min-height:100vh;
}

/* columns */
.llw-left, .llw-right{
  display:flex;
  align-items:center;
  box-sizing:border-box;
}

/* Left: circle starts at left edge INSIDE container, but never overflows */
.llw-left{
  justify-content:flex-start;
  padding: 20px;
  overflow: hidden;          /* IMPORTANT: prevents circle exceeding section */
}

/* Right: keep readable padding */
.llw-right{
  justify-content:flex-start;
  padding: min(6vw, 80px);
  padding-left: min(6vw, 96px);
  padding-right: min(6vw, 96px);
}

.llw-right h3 {
  text-transform: uppercase;
	font-weight: 600 !important;
  margin-bottom: 20px !important;}


.llw-text{ max-width: 720px; }

.llw-text .llw-title{
  font-family: 'Outfit' !important;
  text-transform: uppercase;
  color: var(--llw-title);
  font-size: 38px;
  font-weight: 800 !important;	
  line-height:1.05;
  margin:0 0 22px;
  font-weight: 500;
  padding-bottom: 10px;
}


.llw-text .llw-body{
  color: var(--llw-body);
  font-size: 20px;
  line-height: 1.7;
  margin:0;
  max-width: 560px;
}

/* Circle wrapper:
   - width relative to LEFT column, never exceeds it
   - aligned left
*/
.llw-circlewrap{
  position:relative;
  width: 100%;
  max-width: 760px;          /* control absolute max size */
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  margin-left: 0;
  transform: none;           /* remove negative shift */
}

.llw-circle-bg{
  position:absolute;
  inset: 2%;
  border-radius: 999px;
  background: var(--llw-circle-bg);
  z-index:0;
}

.llw-circle-svg{
  position:absolute;
  inset:0;
  z-index:1;
}

.llw-circle-center{
  width: 34%;
  aspect-ratio: 1/1;
  display:grid;
  place-items:center;
  z-index:2;
}

.llw-circle-center img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.llw-circle-dot{
  position:absolute;
  width: 44px;
  height: 44px;
  border-radius:999px;
  background: var(--llw-accent);
  display:grid;
  place-items:center;
  z-index:3;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.llw-circle-dotnum{
  color: var(--llw-dot-text);
  font-weight:700;
  font-size: 14px;
  line-height:1;
}

/* SVG strokes */
.llw-circle-svg svg{
  width:100%;
  height:100%;
  display:block;
}

.llw-circle-base{
  stroke: var(--llw-base);
  stroke-width: 1.2;
  fill: none;
}

.llw-circle-progress{
  stroke: var(--llw-accent);
  stroke-width: 0.3; /* war 1.6 -> halbiert */
  fill: none;
  stroke-linecap: round;
}

/* Mobile */
@media (max-width: 900px){
  .llw-grid{ grid-template-columns: 1fr; }
  .llw-right{
    justify-content:center;
    padding-left: min(6vw, 28px);
    padding-right: min(6vw, 28px);
  }
  .llw-left{
    justify-content:center;
    padding: 0;
    overflow: visible;
  }
  .llw-circlewrap{
    width: min(86vw, 560px);
    max-width: none;
  }
}