(function(){

    if(document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', siegel_init);
	} else {
		siegel_init();
	}

    function siegel_init(){
        const widget = document.querySelector('#siegel-a7d934f4eecc');

        widget.innerHTML= `
        <div style="position:relative; width:441px; aspect-ratio:441 / 288; margin:0; background-image:url(https://cdn.arztsuche-portale.de/public/assets/img/bg/v2/Banner-01.svg);  background-repeat:no-repeat;font-family:Montserrat, Arial, sans-serif; font-size:82%; line-height:125%;">
    <style>
        @font-face{
            font-family: 'Montserrat';
            src:url('https://cdn.arztsuche-portale.de/public/assets/font/Montserrat-Regular.ttf') format('truetype'),
                url('https://cdn.arztsuche-portale.de/public/assets/font/Montserrat-SemiBold.ttf') format('truetype'),
                url('https://cdn.arztsuche-portale.de/public/assets/font/Montserrat-ExtraBold.ttf') format('truetype'),;
        }
        #siegel-a7d934f4eecc span{
            font-family: 'Montserrat', sans-serif !important;
            -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;
        }
        #siegel-a7d934f4eecc img{ user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;}
        #siegel-a7d934f4eecc {display: flex; justify-content: center; align-items: center;}
        #siegel-a7d934f4eecc {
            font-size: 16px;
        }
        #siegel-a7d934f4eecc #sdoc>span{
            font-size: 1.15em
        }
        #siegel-a7d934f4eecc #ddoc>span{
            font-size: 1.00em
        }
        #siegel-a7d934f4eecc #ribbon{
            font-size: 1.15em;
        }
        #siegel-a7d934f4eecc a{
            all:unset;
            display: block;
            text-decoration: none !important;
            color: #fff;
        }
        #siegel-a7d934f4eecc a:before{
            all:unset;
        }
        #siegel-a7d934f4eecc a:hover,
        #siegel-a7d934f4eecc a:focus{
            all:unset;
            cursor: pointer;
            color: transparent !important;
            text-decoration: none !important;
        }
        @media (max-width:1200px){
            .col-md-4 #siegel-a7d934f4eecc #sdoc>span{
                font-size: 0.9em;
            }
            .col-md-4 #siegel-a7d934f4eecc #ddoc>span{
                font-size: 0.8em;
            }
            .col-md-4 #siegel-a7d934f4eecc #ribbon{
                font-size: 0.85em;
            }
        }
        @media (min-width:1200px) and (max-width:1400px){
            .col-md-4 #siegel-a7d934f4eecc #sdoc>span{
                font-size: 1em;
            }
            .col-md-4 #siegel-a7d934f4eecc #ddoc>span{
                font-size: 0.9em;
            }
            .col-md-4 #siegel-a7d934f4eecc #ribbon{
                font-size: 0.95em;
            }
        }
    </style>
    <div style="position:absolute; left: 9%; top: 14.5%; width:81.65%; height:53.3%;">
        <div style="padding: 0 9.7% 0 9.7%; height:100%;">
            <div style="position:absolute; top:40%; width: 83%; ">
                                    <a href="https://www.zahnarzt-arztsuche.de/zahnarzt/koeln/dr-jan-laszlo-hauler/126/" target="_blank">
                        <div id="sdoc" style="line-height:1.125;font-weight:600;color:#fff; width: 83%; max-height:3.4em;overflow:hidden; margin-bottom: 2.22%;">
                            <span>Dr. Jan-Laszlo Hauler</span>
                        </div>
                    </a>
                                                    <a href="https://www.zahnarzt-arztsuche.de/zahnaerzte/koeln/" target="_blank">
                        <div id="ddoc" style="font-weight:500;color:#fff; width: 83%; height: 2.25em;overflow:hidden;">
                            <span>Zahnarzt in Köln</span>
                        </div>
                    </a>
                            </div>
            
        </div>
    </div>
    <div id="ribbon" style="color:black;line-height:1.16;text-align:center;font-weight:800;color:#fff;padding-bottom:0.68%;position:absolute; top:15.4%; right:16.1%; width: 14.515%; max-height: 13.43%;overflow:hidden;">
        <span style="letter-spacing: 0.1em;">TOP</span>
        <span style="letter-spacing: 0.02em;">2024</span>
    </div>
    <a href="https://www.zahnarzt-arztsuche.de/" target="_blank" style="display:block; position:absolute; bottom:15%; left:9%; width:82%; height:17%; border-bottom-left-radius:1em; border-bottom-right-radius:1em;"></a>
</div>

        `
    }
})();