.elementor-10666 .elementor-element.elementor-element-3526abf{--display:flex;--min-height:1500px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--overflow:hidden;--overlay-opacity:0.93;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10666 .elementor-element.elementor-element-3526abf:not(.elementor-motion-effects-element-type-background), .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://in-circuit.de/wp-content/uploads/2026/02/CPUallgemein.png");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-10666 .elementor-element.elementor-element-3526abf::before, .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-background-video-container::before, .elementor-10666 .elementor-element.elementor-element-3526abf > .e-con-inner > .elementor-background-video-container::before, .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-background-slideshow::before, .elementor-10666 .elementor-element.elementor-element-3526abf > .e-con-inner > .elementor-background-slideshow::before, .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-10666 .elementor-element.elementor-element-735fbaa{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:center;}.elementor-10666 .elementor-element.elementor-element-735fbaa.elementor-element{--align-self:center;}.elementor-10666 .elementor-element.elementor-element-735fbaa .elementor-heading-title{font-family:"Inter", Sans-serif;font-weight:700;text-transform:uppercase;color:#FFFFFF;}.elementor-10666 .elementor-element.elementor-element-9c5b64d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:20px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;}.elementor-10666 .elementor-element.elementor-element-6a3acc7{width:100%;max-width:100%;}.elementor-10666 .elementor-element.elementor-element-6a3acc7.elementor-element{--align-self:flex-start;}@media(min-width:768px){.elementor-10666 .elementor-element.elementor-element-9c5b64d{--width:90%;}}@media(min-width:1025px){.elementor-10666 .elementor-element.elementor-element-3526abf:not(.elementor-motion-effects-element-type-background), .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-10666 .elementor-element.elementor-element-3526abf{--margin-top:-17px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-10666 .elementor-element.elementor-element-735fbaa .elementor-heading-title{font-size:14px;}.elementor-10666 .elementor-element.elementor-element-9c5b64d{--margin-top:-17px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-10666 .elementor-element.elementor-element-3526abf{--content-width:100%;--min-height:350px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-10666 .elementor-element.elementor-element-3526abf:not(.elementor-motion-effects-element-type-background), .elementor-10666 .elementor-element.elementor-element-3526abf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:636px auto;}.elementor-10666 .elementor-element.elementor-element-3526abf.e-con{--align-self:center;--order:99999 /* order end hack */;}.elementor-10666 .elementor-element.elementor-element-735fbaa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:60px 0px 0px 0px;}.elementor-10666 .elementor-element.elementor-element-735fbaa{--container-widget-width:1000px;--container-widget-flex-grow:0;width:var( --container-widget-width, 1000px );max-width:1000px;}.elementor-10666 .elementor-element.elementor-element-735fbaa .elementor-heading-title{font-size:21px;}.elementor-10666 .elementor-element.elementor-element-9c5b64d{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-10666 .elementor-element.elementor-element-9c5b64d.e-con{--order:99999 /* order end hack */;}}/* Start custom CSS for container, class: .elementor-element-3526abf */<div id="stl-viewer-main-wrapper" style="width: 100%; min-height: 500px; background: #1a1a1a; border: 2px solid #333; border-radius: 8px; position: relative;">
    
    <div id="drop-zone-display" style="padding: 100px 20px; text-align: center; color: #ffffff;">
        <div style="font-size: 40px; margin-bottom: 15px;">📦</div>
        <p style="margin: 0; font-weight: bold; font-size: 18px;">STL-Datei hierher ziehen</p>
        <p style="margin: 5px 0 0; opacity: 0.6;">oder klicken zum Auswählen</p>
    </div>

    <input type="file" id="file-input" accept=".stl" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 9999;">

    <div id="canvas-preview" style="width: 100%; height: 500px; display: none;"></div>
</div>

<style>
#stl-viewer-main-wrapper.dragover {
    border-color: #ffaa00 !important;
    background: rgba(255, 170, 0, 0.1) !important;
}

#canvas-preview canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<script>
(function() {
    let scene, camera, renderer, controls, mesh;
    const wrapper = document.getElementById('stl-viewer-main-wrapper');
    const fileInput = document.getElementById('file-input');
    const display = document.getElementById('drop-zone-display');
    const preview = document.getElementById('canvas-preview');

    // Drag-Effekte optisch sichtbar machen
    fileInput.addEventListener('dragenter', () => wrapper.classList.add('dragover'));
    fileInput.addEventListener('dragleave', () => wrapper.classList.remove('dragover'));
    fileInput.addEventListener('drop', () => wrapper.classList.remove('dragover'));

    // Browser-Standardverhalten global unterdrücken
    window.addEventListener("dragover", e => e.preventDefault(), false);
    window.addEventListener("drop", e => e.preventDefault(), false);

    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file && file.name.toLowerCase().endsWith('.stl')) {
            const reader = new FileReader();
            reader.onload = (event) => {
                // UI umschalten
                display.style.display = 'none';
                fileInput.style.display = 'none';
                preview.style.display = 'block';
                
                init3D(preview);
                loadSTLData(event.target.result);
            };
            reader.readAsArrayBuffer(file);
        }
    });

    function init3D(container) {
        if (scene) return;
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x1a1a1a);
        
        camera = new THREE.PerspectiveCamera(45, container.clientWidth / 500, 1, 10000);
        camera.position.set(200, 200, 200);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(container.clientWidth, 500);
        container.appendChild(renderer.domElement);

        scene.add(new THREE.AmbientLight(0xffffff, 0.6));
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1);
        scene.add(light);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    }

    function loadSTLData(data) {
        const loader = new THREE.STLLoader();
        const geometry = loader.parse(data);
        const material = new THREE.MeshPhongMaterial({ color: 0xffaa00, specular: 0x111111, shininess: 200 });
        mesh = new THREE.Mesh(geometry, material);
        
        geometry.computeBoundingBox();
        const center = new THREE.Vector3();
        geometry.boundingBox.getCenter(center);
        mesh.position.sub(center);
        scene.add(mesh);

        const size = geometry.boundingBox.getSize(new THREE.Vector3()).length();
        camera.position.set(size, size, size);
        camera.lookAt(0, 0, 0);
    }
})();
</script>/* End custom CSS */