body {
margin: 0;
font-family: "Noto Sans", sans-serif;
background: #f5f5f5;
overflow-x: hidden;
}

model-viewer {
width: 100%;
height: 600px;
background-color: #e9ecef;
display: block;
}

/* Hotspots rund, mit weißem Rand und leichter Leuchtwirkung */
.hotspot {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 140, 0, 0.95);
border: 2px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: transform 0.2s, opacity 0.3s;
}

.hotspot:hover {
transform: scale(1.3);
}

/* Info-Bubbles */
.info-bubble {
position: absolute;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 10px 14px;
width: 220px;
font-size: 13px;
line-height: 1.5;
text-align: justify;
color: #333;
z-index: 3;
display: none;
}

.info-bubble h3 {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
text-align: left;
}

.info-bubble p {
margin: 0 0 6px;
color: #555;
}

.info-bubble a {
text-decoration: none;
color: #ff8c00;
font-weight: 600;
}

.info-bubble a:hover {
text-decoration: underline;
}

 

 

const viewer = document.getElementById('viewer');

// Produktinfos const products = { 1: { title:"CORKTHERM SICHTFASSADE", desc:"Ökologischer Dämmstoff aus Kork – hohe Wärmedämmung und ein angenehmes Raumklima. CORKTHERM besteht zu 100 % aus natürlichem, expandiertem Kork – ohne chemische Zusätze.", link:"https://ziro.de/produkte/corktherm/" }, 2: { title:"ZIRO KORK WANDDESIGN", desc:"Mit natürlichen Eigenschaften schafft Kork eine wohnliche Atmosphäre. Exzellente Schalldämmung, leichte Reinigung und jede Fliese ein Unikat.", link:"https://ziro.de/produkte/ziro-kork-wanddesign/" }, 3: { title:"CORKTHERM 040 DÄMMKORK", desc:"Der ökologische Allrounder aus 100 % Korkrinde bietet hervorragende Wärmedämmung – ideal für Holzbau und Aufsparrendämmung.", link:"https://ziro.de/unsere-produkte/dammstoffe/" }, 4: { title:"ZIRO KORKPARKETT", desc:"Weich, elastisch und schalldämmend sorgt Kork für ein warmes Wohngefühl. Antistatisch und pflegeleicht – perfekt für Allergiker.", link:"https://ziro.de/produkte/ziro-kork-korkparkett/" }, 5: { title:"KORKSCHROT REINEXPANDIERT", desc:"Natürliche Schall- und Wärmedämmung für Hohlräume in Wand, Decke und Boden. Füllt Räume lückenlos und ist auch zum Einblasen geeignet.", link:"https://ziro.de/wp-content/uploads/2024/01/03030400_TDB_Korkschrot_naturbelassen.pdf" }, 6: { title:"KORKSCHROT NATURBELASSEN", desc:"Ökologisches Schüttmaterial zur Schall- und Wärmedämmung – ideal für Dachschrägen, Ständerbauweise und nicht druckbelastbare Böden.", link:"https://ziro.de/produkte/corktherm/" }, 7: { title:"ZIRO KORK COLORPARKETT", desc:"Bis zu 270 Farb- und Designvarianten für individuelle Böden. Jede Fliese ein Unikat, auf Wunsch in jeder Farbe erhältlich.", link:"https://ziro.de/produkte/ziro-kork-colorparkett/" } };

// Info-Bubbles erstellen document.querySelectorAll('.hotspot').forEach(btn=>{ const bubble = document.createElement('div'); bubble.className='info-bubble'; document.body.appendChild(bubble); btn._bubble = bubble;

btn.addEventListener('click', e=>{ e.stopPropagation(); viewer.autoRotate=false;

const info = products[btn.dataset.product]; bubble.innerHTML=`

${info.title}

${info.desc}

Mehr erfahren →`; bubble.style.display='block';

const rect = btn.getBoundingClientRect(); let bubbleX = rect.right + 60; if(bubbleX + 220 > window.innerWidth) bubbleX = rect.left - 60 - 220; bubble.style.left = bubbleX+'px'; bubble.style.top = rect.top + window.scrollY -10+'px';

// Andere Bubbles ausblenden document.querySelectorAll('.info-bubble').forEach(b=>{ if(b!==bubble) b.style.display='none'; }); document.querySelectorAll('.hotspot').forEach(h=>{ if(h!==btn) h.style.opacity=0.5; else h.style.opacity=1; }); }); });

// Klick außerhalb -> Bubble schließen und Auto-Rotation wieder aktivieren document.addEventListener('click', ()=>{ document.querySelectorAll('.info-bubble').forEach(b=>b.style.display='none'); document.querySelectorAll('.hotspot').forEach(h=>h.style.opacity=1); viewer.autoRotate=true; });