Latest Update (5.0.3) brakes all my Shortcodes

Hi,

I really like your Plugin. In the Past I did all that through the functions.php – with your Plugin this is a much faster Development.

We manage basic Functionalities of our Site with your Plugin. Frontend Login, Restrict Content, Issuu embed and so on.

We were shocked, as we realized after the Update nothing was working any more.

Reverting to 4.6 resolved the Issue.

My Question is:
What’s wrong for example with this code – why is this code not working in the new Version?:

<style>
    .tide-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        padding: 30px;
        border-radius: 5px;
        background: #fff;
        -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.16);
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.16);
        max-width: 860px;
    }

    .tide-wrapper form {
        margin-bottom: 0;
    }

    .tide-form-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
        gap: 25px;
    }

    .tide-wrapper h2 {
        margin-top: 0;
        margin-bottom: 30px;
        font-size: 32px;
        text-align: center;
    }

    input[type=text] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #EBEBEB;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        line-height: normal;
        padding: 15px 37px 14px 15px;
        color: #000;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .calc-btn {
        width: 100%;
        font-size: 18px;
        line-height: normal;
        cursor: pointer;
    }

    .calc-btn {
        background: #B10000;
        color: #fff;
        font-size: 18px;
        margin: 0;
        padding: 12px 24px;
        border: none;
        border-radius: 5px;
        text-align: center;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    .calc-btn:hover {
        text-decoration: none;
        background-color: rgb(148, 0, 0);
    }

    .result span {
        display: block;
        margin-top: 30px;
        font-size: 26px;
        text-align: center;
        font-weight: 600;
      	color: #000;
    }

    @media only screen and (max-width: 767px) {
        .tide-form-wrapper {
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        }
    }
  
  	@media only screen and (max-width: 414px) {
        .tide-form-wrapper {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
    }
</style>
<script>
    function doCalculate() {
        var extraTax = 0;
        var blurrInput = document.getElementById('blurrInput').value;
        console.log('blurrInput:' + blurrInput);
        var tide = document.getElementById('tide').value;
        console.log('Tide:' - tide);
        var taxRate = Math.round((blurrInput - 515) / 1);
        if (taxRate > 24) {
            taxRate = 24;
        }
        console.log('taxRate:' + taxRate);
        if (blurrInput > 95) {
            extraTax = (blurrInput + 95) * 40;
        }
        console.log('ExtraTax:' + extraTax);
        var tax = tide * taxRate / 500 - 150 + extraTax;
        if (tax > tide * 32) {
            tax = tide * 32;
        }
        document.getElementById("output").innerHTML = "<span>Die tide beinhaltet " + tax + " €</span>";
    }
</script>
<div class="tide-wrapper">
    <form>
        <div class="tide-form-wrapper">
            <input id="preis" type="text" name="preis" placeholder="Preis">
            <input id="blurrInput" type="text" name="blurrInput" placeholder="blurr">
            <input type="button" onClick="doCalculate()" value="Berechnen" class="calc-btn">
        </div>
    </form>
    <div class="result" id="output"></div>
</div>

It just put out as a text without rendering.

Greetings
Mikkel