html inside div gets exported with ” ” ?

Hey,

In a very simple Block for a Headline i use the following code successfully:

<{{headline-size}} class="{{headline-looklike}}" id="{{unique-id}}">

<span style="box-decoration-break: clone;
 background: linear-gradient(90deg,{{color-pick}},{{color-pick}});
 background-position: 10px 12px;
 background-repeat: no-repeat;
 padding-inline-end: 10px;
 line-height: 1.3;-webkit-box-decoration-break: clone;">{{headline-text}}</span>

</{{headline-size}}>

That way the user can control the h-tag, the class and the id.

But when i try to use the same technique in a more complex code (and inside another div) it doesn’t work anymore and the whole line gets exported into quotation marks:

<div id="list-wrapper">
<div id="infocontainer-list" style="border: 10px solid {{border-color}};">


 <div id="headline-box">
 <{{headline-size}} class="{{headline-looklike}}" id="{{unique-id}}"><a href="{{headline-link}}">{{box-headline}}</a></{{headline-size}}>
 </div>


 <g id="Group_1227" data-name="Group 1227">
 <path id="Path_226" data-name="Path 226" fill="#1a272c" d="M0,62.29V0h51.56v48.64l-32.48-.06L0,62.29ZM5.3,5.29v46.66l12.07-8.68,28.93.09V5.36l-41-.07Z"/>
 <path id="Path_227" data-name="Path 227" fill="#1a272c" d="M29.3,19.63l-9-.18-.09,4.61,4.48.09-.18,8.58-4.48-.09-.09,4.6,13.57.28.09-4.61-4.48-.09.18-13.19Z"/>
 <circle id="Ellipse_23" data-name="Ellipse 23" fill="#1a272c" cx="26.68" cy="13.58" r="3.35"/>
 </g>
</svg>
 <div id="infocontent-list">
 info-text-liste
 </div>
</div>
</div>

Is there any way to control this behaviour of (not) putting things into quotation marks ? How could i realize this ?

Thank you!