<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cooperations Archive - Heartucate</title>
	<atom:link href="https://heartucate.eu/en/cooperations/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>Wir transformieren Bildung</description>
	<lastBuildDate>Mon, 19 Jan 2026 12:03:53 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://heartucate.eu/wp-content/uploads/2020/08/cropped-Heartucate_Signet_WEB-300-32x32.png</url>
	<title>Cooperations Archive - Heartucate</title>
	<link></link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>QuantumLab</title>
		<link>https://heartucate.eu/en/cooperations/quantumlab-eng/</link>
		
		<dc:creator><![CDATA[Heartucate-admin]]></dc:creator>
		<pubDate>Sun, 11 Jan 2026 08:33:04 +0000</pubDate>
				<category><![CDATA[Cooperations]]></category>
		<guid isPermaLink="false">https://heartucate.eu/?p=55420</guid>

					<description><![CDATA[<p>The high-tech laboratory for your pocket  No more dry theory and expensive equipment. The QuantumLab app, developed on behalf of the University of Leipzig, transforms your smartphone or tablet into a fully-fledged research laboratory. Thanks to innovative XR technology (for Android &amp; iOS), you can bring complex physical structures directly to your  [...]</p>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/quantumlab-eng/">QuantumLab</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;" ><div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="max-width:1248px;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion-flex-column fusion-flex-align-self-flex-start fusion-animated" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInUp" data-animationDuration="1.0" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<style>
  #hero-track-hero-22551 { 
      position: relative; 
      width: 100vw; 
      left: 50%;
      margin-left: -50vw;
      height: 450vh; 
      z-index: 10; 
  }
  #hero-sticky-viewport-hero-22551 { position: sticky; top: 0; width: 100vw; height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); left: 50%; right: 50%; overflow: hidden; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; perspective: 1200px; opacity: 0; transition: opacity 0.5s ease-in; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
  #hero-sticky-viewport-hero-22551.loaded { opacity: 1; }
  #hero-main-wrapper-hero-22551 { position: relative; z-index: 100; width: 90vw; max-width: 1000px; aspect-ratio: 1.455; transform-style: preserve-3d; will-change: transform; margin: auto; transition: transform 0.1s cubic-bezier(0.2, 0, 0.4, 1); }
  .hero-mask-hero-22551 { position: absolute; top: 6.5%; left: 5.3%; right: 8.4%; bottom: 8.1%; border-radius: 13px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
  .hero-gradient-hero-22551 { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 2; pointer-events: none; }
  .hero-layer-hero-22551 { position: absolute; inset: 0; transform-style: preserve-3d; }
  
  .hero-fixed-blur-layer-hero-22551 {
    position: absolute; 
    inset: 1%; 
    border-radius: 65px;
    transform: translateZ(undefinedpx);
    opacity: 0.75;
    background-image: url('https://heartucate.eu/wp-content/uploads/2025/12/display-texture3png.png'); background-size: cover; background-position: center;
    mask-image: radial-gradient(closest-side, transparent 34%, black 94%); -webkit-mask-image: radial-gradient(closest-side, transparent 34%, black 94%);
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 0; 
  }

  #hero-back-hero-22551 { 
      z-index: 10; 
      transform-style: preserve-3d; 
      transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); 
  }
  
  .hero-frame-img-hero-22551 { transform: translateZ(2px); z-index: 20; }
  
  #hero-room-group-hero-22551 { z-index: 20; pointer-events: none; transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
  .hero-room-img-layer-hero-22551 { position: absolute; width: 80%; height: auto; transform-origin: center center; top: -28%; left: 50%; transform: translate(-50%, 0) scale(0.45); will-change: opacity, transform; backface-visibility: hidden; }
  #hero-front-hero-22551 { z-index: 30; pointer-events: none; transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); }
  
  .hero-bubble-hero-22551 {
    position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: linear-gradient(135deg, #0091b98C, #005f848C, #0091b98C);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-radius: 99px; color: white; font-weight: 700; font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1000; pointer-events: none; 
    transform: translate(-50%, -50%) translateZ(150px) scale(0); opacity: 0;
    will-change: transform, opacity;
    white-space: nowrap;
  }
  
  @keyframes heroPop-hero-22551 {
    0% { opacity: 0; transform: translate(-50%, -50%) translateZ(150px) scale(0.5); }
    60% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1); }
  }

  .hero-bubble-hero-22551.visible { 
      animation: heroPop-hero-22551 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
  }
  
  .hero-bubble-hero-22551:nth-of-type(1) { animation-delay: 0.1s; }
  .hero-bubble-hero-22551:nth-of-type(2) { animation-delay: 0.2s; }
  .hero-bubble-hero-22551:nth-of-type(3) { animation-delay: 0.3s; }
  .hero-bubble-hero-22551:nth-of-type(4) { animation-delay: 0.4s; }
  .hero-bubble-hero-22551:nth-of-type(5) { animation-delay: 0.5s; }
  .hero-bubble-hero-22551:nth-of-type(6) { animation-delay: 0.6s; }

  .hero-bubble-icon-hero-22551 { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: white; }

  @keyframes spinIn-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); opacity: 1; } }
  @keyframes spinInFront-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
  @keyframes spinInRoom-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }

  @media (max-width: 768px) {
      .hero-bubble-hero-22551 { display: none !important; }
      #hero-track-hero-22551 { height: 450vh; }
      #hero-sticky-viewport-hero-22551 { perspective: 1200px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
      #hero-main-wrapper-hero-22551 { width: 95vw; max-width: none; aspect-ratio: 0.54; }
      .hero-mask-hero-22551 { top: 10%; left: 7.2%; right: 7.2%; bottom: 4.6%; border-radius: 46px; }
      .hero-gradient-hero-22551 { height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
      
      .hero-fixed-blur-layer-hero-22551 { 
          
         opacity: undefined;
         transform: translateZ(undefinedpx);
         border-radius: undefinedpx;
         
      }

      #hero-back-hero-22551 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); }
      #hero-room-group-hero-22551 { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
      .hero-room-img-layer-hero-22551 { top: 25%; left: 50%; transform: translate(-50%, 0) scale(0.95); }
      #hero-front-hero-22551 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); }
      @keyframes spinIn-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); opacity: 1; } }
      @keyframes spinInFront-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
      @keyframes spinInRoom-hero-22551 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }
  }
  .animate-entry-hero-22551 { animation: spinIn-hero-22551 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-room-hero-22551 { animation: spinInRoom-hero-22551 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  #hero-front-hero-22551.animate-entry-hero-22551 { animation: spinInFront-hero-22551 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
</style>
<div id="hero-track-hero-22551">
  <div id="hero-sticky-viewport-hero-22551">
    <div style="position: absolute; inset: 0; z-index: 1;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div style="position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0.8;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div id="hero-main-wrapper-hero-22551">
      <div id="hero-back-hero-22551" class="hero-layer-hero-22551 animate-entry-hero-22551">
        <div class="hero-fixed-blur-layer-hero-22551"></div>
        <picture class="hero-frame-img-hero-22551" style="position: absolute; inset: 0; width: 100%; height: 100%;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/iphone-mockup.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/2-tablet.png" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;" alt="" /></picture>
        <div class="hero-mask-hero-22551"></div>
      </div>
      <div id="hero-room-group-hero-22551" class="hero-layer-hero-22551 animate-room-hero-22551"><img id="hero-room-slot0-hero-22551" class="hero-room-img-layer-hero-22551" decoding="sync" src="https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/45.png" style="z-index: 1;" alt="" /><img id="hero-room-slot1-hero-22551" class="hero-room-img-layer-hero-22551" decoding="sync" src="https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/45.png" style="z-index: 1; opacity: 0;" alt="" /></div>
      <div id="hero-front-hero-22551" class="hero-layer-hero-22551 animate-entry-hero-22551"><div class="hero-mask-hero-22551"><div id="hero-gradient-el-hero-22551" class="hero-gradient-hero-22551"></div><picture style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/quantumlablogodark.png"><img decoding="async" id="hero-logo-img-hero-22551" src="https://heartucate.eu/wp-content/uploads/2025/12/quantumlablogodark.png" style="position: absolute; width: 40%; height: auto; z-index: 10; transform-origin: center bottom; top: 91%; left: 50%; transform: translate(-50%, -100%) scale(0.65); opacity: 1;" alt="" /></picture></div></div>
      <div id="hero-bubbles-layer-hero-22551" class="hero-layer-hero-22551" style="z-index: 100; pointer-events: none;"></div>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const track = document.getElementById('hero-track-hero-22551'), viewport = document.getElementById('hero-sticky-viewport-hero-22551'), wrapper = document.getElementById('hero-main-wrapper-hero-22551');
  const back = document.getElementById('hero-back-hero-22551'), front = document.getElementById('hero-front-hero-22551'), roomGroup = document.getElementById('hero-room-group-hero-22551');
  const bubbleLayer = document.getElementById('hero-bubbles-layer-hero-22551');
  const slots = [document.getElementById('hero-room-slot0-hero-22551'), document.getElementById('hero-room-slot1-hero-22551')], logo = document.getElementById('hero-logo-img-hero-22551'), gradient = document.getElementById('hero-gradient-el-hero-22551');
  const PARALLAX_MAX = 10;
  if(PARALLAX_MAX > 0 && window.matchMedia("(hover: hover)").matches && wrapper) { document.addEventListener('mousemove', (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 2; const y = (e.clientY / window.innerHeight - 0.5) * 2; wrapper.style.transform = `rotateY(${x * PARALLAX_MAX}deg) rotateX(${-y * PARALLAX_MAX}deg)`; }); }
  
  const SEQ_ENABLED = true;
  const SEQ_IMAGES = ["https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/45.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/46.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/47.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/48.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/49.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/50.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/51.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/52.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/53.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/54.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/55.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/56.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/57.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/58.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/59.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/60.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/61.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/62.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/63.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/64.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/65.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/66.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/67.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/68.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/69.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/70.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/71.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/72.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/73.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/74.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/75.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/76.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/77.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/78.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/79.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/80.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/81.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/82.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/83.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/84.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/85.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/86.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/87.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/88.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/89.png","https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/90.png"];
  const ASSETS = { D: { room: "https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/45.png" }, M: { room: "https://heartucate.eu/content/projects/quantum-lab/hero-section/1024x1024/45.png" } };
  
  const BUBBLES = [{"side":"left","id":1,"visible":true,"y":30,"text":"6 experiments with different levels","scale":1.2,"x":16,"icon":"clock"},{"text":"From grade 11","visible":true,"id":2,"x":0,"side":"left","y":50,"scale":1,"icon":"target"},{"x":11,"visible":true,"side":"left","id":3,"icon":"pdf","y":70,"text":"On behalf of the University of Leipzig","scale":1},{"x":80,"icon":"users","id":4,"visible":true,"side":"right","scale":1.2,"text":"Up to 4 players per group","y":35},{"visible":true,"x":86,"id":5,"side":"right","text":"For tablets and smartphones","icon":"tablet","scale":1,"y":55},{"y":75,"text":"Augmented Reality","id":6,"visible":true,"side":"right","scale":1,"x":72,"icon":"vr"}];
  const ICONS = {"clock":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg>","users":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>","pdf":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line><polyline points=\"10 9 9 9 8 9\"></polyline></svg>","tablet":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg>","target":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><circle cx=\"12\" cy=\"12\" r=\"6\"></circle><circle cx=\"12\" cy=\"12\" r=\"2\"></circle></svg>","vr":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"></polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"></line></svg>"};
  
  if(window.innerWidth > 768 && BUBBLES.length > 0) {
      BUBBLES.forEach(b => {
          if(!b.visible) return;
          const el = document.createElement('div');
          el.className = 'hero-bubble-hero-22551';
          el.style.left = b.x + '%'; el.style.top = b.y + '%'; el.style.transform = `translate(-50%, -50%) translateZ(150px) scale(${b.scale})`;
          el.innerHTML = `<div class="hero-bubble-icon-hero-22551">${ICONS[b.icon]}</div><span>${b.text}</span>`;
          bubbleLayer.appendChild(el);
      });
  }

  if(SEQ_ENABLED && SEQ_IMAGES.length > 0) SEQ_IMAGES.forEach(src => { const img = new Image(); img.src = src; if('decode' in img) img.decode().catch(()=>{}); });
  if(viewport) viewport.classList.add('loaded');
  const unlockElements = [back, front, roomGroup];
  function unlockAnimation() { unlockElements.forEach(el => { if(el) { el.style.animation = 'none'; el.classList.remove('animate-entry-hero-22551'); el.classList.remove('animate-room-hero-22551'); } }); update(); }
  if(back) { back.addEventListener('animationend', unlockAnimation, { once: true }); setTimeout(unlockAnimation, 1600); } else { update(); }
  const DesktopS = {"tabRotX":0,"roomY":-28,"tabX":0,"logoScale":0.65,"roomScale":0.45,"roomRotZ":0,"logoX":50,"tabRotZ":0,"tabRotY":11,"tabScale":0.7,"tabY":0,"logoOpacity":1,"roomRotY":0,"logoY":91,"roomX":50}, DesktopE = {"logoX":50,"roomRotY":0,"logoOpacity":0,"roomY":0,"tabRotY":48,"logoScale":0.8,"tabX":0,"tabScale":0.7,"logoY":150,"roomScale":0.8,"tabRotZ":-27,"tabRotX":40,"roomX":46,"tabY":0,"roomRotZ":0}, DesktopSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  const MobileS = {"logoOpacity":1,"roomX":50,"tabScale":0.9,"tabRotZ":0,"tabRotX":0,"roomRotZ":0,"roomY":25,"roomRotY":0,"tabX":0,"logoX":50,"roomScale":0.95,"tabRotY":0,"tabY":0,"logoY":78,"logoScale":1.5}, MobileE = {"tabScale":5,"tabRotY":48,"tabRotX":40,"tabRotZ":-27,"roomY":34,"roomX":50,"logoOpacity":0,"roomRotZ":0,"logoScale":0.8,"logoY":150,"tabY":0,"roomRotY":0,"roomScale":0.25,"tabX":0,"logoX":50}, MobileSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  let ticking = false;
  function getProgress(globalP, startP, endP) { if (globalP <= startP) return 0; if (globalP >= endP) return 1; return (globalP - startP) / (endP - startP); }
  function lerp(start, end, t) { return start * (1 - t) + end * t; }
  
  function updateSequence(p3D, baseImg) {
      if (!slots[0] || !slots[1]) return;
      let baseSrc, nextSrc, mix;
      if (!SEQ_ENABLED || SEQ_IMAGES.length === 0) { baseSrc = baseImg; nextSrc = baseImg; mix = 0; } else if (p3D <= 0) { baseSrc = baseImg; nextSrc = SEQ_IMAGES[0]; mix = 0; } else if (p3D >= 1) { const last = SEQ_IMAGES[SEQ_IMAGES.length - 1]; baseSrc = last; nextSrc = last; mix = 0; } else { const totalFrames = SEQ_IMAGES.length - 1; const floatIndex = p3D * totalFrames; const idxBase = Math.floor(floatIndex); const idxNext = Math.min(totalFrames, idxBase + 1); baseSrc = SEQ_IMAGES[idxBase]; nextSrc = SEQ_IMAGES[idxNext]; mix = floatIndex - idxBase; }
      const src0 = slots[0].getAttribute('src'), src1 = slots[1].getAttribute('src');
      let targetSlotBase = 0; if (src1 === baseSrc) targetSlotBase = 1; 
      const targetSlotNext = targetSlotBase === 0 ? 1 : 0; const sBase = slots[targetSlotBase]; if(sBase.getAttribute('src') !== baseSrc) sBase.src = baseSrc; sBase.style.opacity = 1; sBase.style.zIndex = 1; const sNext = slots[targetSlotNext]; if(sNext.getAttribute('src') !== nextSrc) sNext.src = nextSrc; let safeMix = mix; if (safeMix < 0.01) safeMix = 0; sNext.style.opacity = safeMix; sNext.style.zIndex = 2;
  }
  
  function update() {
    if (!track) return;
    const isMobile = window.innerWidth <= 768; const S = isMobile ? MobileS : DesktopS; const E = isMobile ? MobileE : DesktopE; const SEQ = isMobile ? MobileSEQ : DesktopSEQ; const currentBaseRoom = isMobile ? ASSETS.M.room : ASSETS.D.room;
    const rect = track.getBoundingClientRect(); const scrollP = Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
    const pTab = getProgress(scrollP, SEQ.tab[0], SEQ.tab[1]);
    const tScale = lerp(S.tabScale, E.tabScale, pTab), tRotX = lerp(S.tabRotX, E.tabRotX, pTab), tRotY = lerp(S.tabRotY, E.tabRotY, pTab), tRotZ = lerp(S.tabRotZ, E.tabRotZ, pTab), tX = lerp(S.tabX, E.tabX, pTab), tY = lerp(S.tabY, E.tabY, pTab);
    if(back) back.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg)`;
    if(front) front.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg) translateZ(60px)`;
    const rRotX = lerp(S.tabRotX, 0, pTab), rRotY = lerp(S.roomRotY || 0, E.roomRotY || 0, pTab), rRotZ = lerp(S.roomRotZ || 0, E.roomRotZ || 0, pTab), rScale = lerp(S.roomScale, E.roomScale, pTab), rX = lerp(S.roomX, E.roomX, pTab), rY = lerp(S.roomY, E.roomY, pTab), lift = lerp(0, -15, pTab);
    if(roomGroup) roomGroup.style.transform = `scale(${tScale}) rotateZ(${rRotZ}deg) rotateY(${rRotY}deg) rotateX(${rRotX}deg) translateZ(30px)`;
    slots.forEach(img => { if(img) { img.style.top = `${rY}%`; img.style.left = `${rX}%`; img.style.transform = `translate(-50%, ${lift}%) scale(${rScale})`; } });
    
    // THIS LINE WAS THE ISSUE - RESTORED
    const p3D = getProgress(scrollP, SEQ.room3d[0], SEQ.room3d[1]); updateSequence(p3D, currentBaseRoom);
    
    const showBubbles = p3D > 0.1;
    const bubbles = bubbleLayer.querySelectorAll('.hero-bubble-hero-22551');
    bubbles.forEach(b => { if(showBubbles) b.classList.add('visible'); else b.classList.remove('visible'); });

    const pLogo = getProgress(scrollP, SEQ.logo[0], SEQ.logo[1]), lScale = lerp(S.logoScale, E.logoScale, pLogo), lX = lerp(S.logoX, E.logoX, pLogo), lY = lerp(S.logoY, E.logoY, pLogo), lOp = lerp(S.logoOpacity, E.logoOpacity, pLogo);
    if(logo) { logo.style.top = `${lY}%`; logo.style.left = `${lX}%`; logo.style.opacity = lOp; logo.style.transform = `translate(-50%, -100%) scale(${lScale})`; }
    if(gradient) gradient.style.opacity = lOp; 
  }
  window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(() => { update(); ticking = false; }); ticking = true; } }, { passive: true });
  window.addEventListener('resize', update); 
});
</script>

<style>
#fc-section-fc-9583 { 
    position: relative; 
    width: 100vw; 
    left: 50%; 
    margin-left: -50vw; 
    box-sizing: border-box;
    padding-top: 160px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 150px;
    margin-top: -50px; 
    overflow: hidden; 
    font-family: 'Geometria', 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    #fc-section-fc-9583 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-top: 0px !important;
    }
}

#fc-wrap-fc-9583 { position: relative; width: 100%; max-width: 1200px; z-index: 10; }

/* HEADER STYLES */
.fc-header-fc-9583 {
    margin-bottom: 60px;
    text-align: left;
    position: relative;
    z-index: 20;
}
.fc-header-fc-9583 h2 {
    font-size: 42px;
    font-weight: 800;
    color: #002c50;
    margin: 0;
    line-height: 1.1;
}
.fc-header-logo-fc-9583 {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 0px;
    object-fit: contain;
    transform: translateX(100px);
}
@media(max-width: 640px) {
    .fc-header-fc-9583 { text-align: center; } 
    .fc-header-fc-9583 h2 { font-size: 36px; } 
    .fc-header-logo-fc-9583 { transform: translateX(0px); margin-left: auto; margin-right: auto; }
}

/* BUTTON STYLES */
.fc-action-wrapper-fc-9583 {
    margin-top: 40px;
    text-align: center;
    position: relative;
    z-index: 20;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media(min-width: 1280px) {
    .fc-action-wrapper-fc-9583 {
        margin-right: 25% !important;
        max-width: none !important;
    }
}

.fc-action-btn-fc-9583 {
    display: inline-block;
    background: #ED6D32;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 32px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform-style: preserve-3d; 
    perspective: 1000px;
    will-change: transform;
    transition: box-shadow 0.2s ease;
}
.fc-action-btn-fc-9583:hover {
    color: #ffffff !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.2);
}

.fc-btn-reveal { opacity: 0; transform: translateY(20px); }
.fc-in-view .fc-btn-reveal {
    animation: fcHeaderPop-fc-9583 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2000000000000002s; 
}

/* HEADER REVEAL ANIMATION */
@keyframes fcHeaderPop-fc-9583 {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    60% { transform: translateY(-5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-header-reveal { opacity: 0; }
.fc-in-view .fc-header-reveal {
    animation: fcHeaderPop-fc-9583 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fc-header-logo-fc-9583 { animation-delay: 0.1s; }
.fc-header-fc-9583 h2 { animation-delay: 0.2s; }

.fc-bg-gradient-fc-9583 { 
    position: absolute; inset: 0; z-index: 0; 
    background: linear-gradient(-45deg, #002c50, #16ffff, #000307, #c9cfe0); 
    background-size: 400% 400%; 
    animation: fcGradient-fc-9583 20s ease infinite; 
    opacity: 0.82; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
}

.fc-bg-grain-fc-9583 { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
@keyframes fcGradient-fc-9583 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@keyframes fcPop-fc-9583 {
    0% { opacity: 0; transform: scale(0.5) translateY(50px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fc-card { 
    opacity: 0; 
    transform: translateZ(0); 
    will-change: transform, opacity;
}

.fc-in-view .fc-card { 
    animation: fcPop-fc-9583 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}

.fc-side-image-fc-9583 { opacity: 0; transform: translateY(-50%) scale(0.9) translateX(80px); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.fc-bg-heart-fc-9583 { opacity: 0; transform: translate(-10%, calc(-50% + 0%)) scale(0.8); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }

.fc-in-view .fc-side-image-fc-9583 { opacity: 1; transform: translateY(-50%) scale(0.9) translateX(0); }
.fc-in-view .fc-bg-heart-fc-9583 { opacity: 0.1; transform: translate(-10%, calc(-50% + 0%)) scale(0.5); }
.fc-interactive .fc-side-image-fc-9583 { transition: transform 0.1s ease-out !important; }

.fc-side-image-fc-9583 { display: none; position: absolute; right: -40%; top: 50%; height: 90%; width: auto; object-fit: contain; z-index: 5; pointer-events: none; filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.1)); }
.fc-bg-heart-fc-9583 { display: none; position: absolute; top: 50%; right: 0; width: 600px; height: 600px; z-index: 2; pointer-events: none; } .fc-bg-heart-fc-9583 path { fill: #ffffff; }
@media(min-width: 1280px) { .fc-side-image-fc-9583 { display: block; } .fc-bg-heart-fc-9583 { display: block; } #fc-grid-fc-9583 { margin-right: 25% !important; max-width: none !important; } }
#fc-grid-fc-9583 { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; transition: margin 0.3s; }
@media(min-width: 640px) { #fc-grid-fc-9583 { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 1024px) { #fc-grid-fc-9583 { grid-template-columns: repeat(2, 1fr); } }

.fc-card { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border-radius: 20px; 
    padding: 24px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden; 
    transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; 
    height: 100%;
}
@media(max-width: 480px) { .fc-card { flex-direction: column; align-items: center; text-align: center; } }
.fc-card:hover { box-shadow: 0 25px 50px -12px rgba(214, 68, 59, 0.15); background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.fc-icon-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; isolation: isolate; transform-style: preserve-3d; }
.fc-heart-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .fc-heart-bg path { fill: inherit; } 
.fc-card:hover .fc-heart-bg { transform: scale(1.2) rotate(15deg) translateY(-5px); opacity: 0.5; }
.fc-icon { position: relative; z-index: 20; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; transform: translateZ(0); } 
.fc-card:hover .fc-icon { transform: translateZ(50px) scale(1.1); }
.fc-icon svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.fc-content { flex: 1; z-index: 10; position: relative; transform: translateZ(20px); } .fc-content h3 { font-size: 18px; font-weight: 800; color: #1e293b; margin: 0 0 6px 0; line-height: 1.2; } .fc-content p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }

.fc-icon-img-free { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 20; transform: translateZ(0); }
.fc-card:hover .fc-icon-img-free { transform: translateZ(50px) scale(1.1); transition: transform 0.4s ease; }
.fc-icon-img-free img { width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; }

.fc-card.variant-compact {
    flex-direction: column-reverse; 
    text-align: center;
    justify-content: space-between;
    padding: 12px 20px; 
}
.fc-card.variant-compact .fc-content {
    margin-bottom: 0; 
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}
.fc-card.variant-compact p { display: none; } 

.fc-snake-svg-fc-9583 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.fc-snake-path-fc-9583 { fill: none; stroke: url(#line-grad-fc-9583); stroke-width: 11px; stroke-opacity: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(214,68,59,0.4)); mask: url(#fc-mask-fc-9583); }
</style>
<div id="fc-section-fc-9583">
    <div class="fc-bg-gradient-fc-9583"></div><div class="fc-bg-grain-fc-9583"></div>
    <svg class="fc-bg-heart-fc-9583" viewBox="0 0 79 74" xmlns="http://www.w3.org/2000/svg"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
    <img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/Strahlenteilerwuerfel.png" class="fc-side-image-fc-9583" alt="" />
    
    <div id="fc-wrap-fc-9583">
        
                <div class="fc-header-fc-9583">
                    
                    <div class="fc-header-reveal"><h2>QUANTUM LAB AR</h2></div>
                </div>
            
        
        <svg id="fc-svg-fc-9583" class="fc-snake-svg-fc-9583">
            <defs>
                <linearGradient id="line-grad-fc-9583" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#16ffff" />
                    <stop offset="50%" stop-color="#002c50" />
                    <stop offset="100%" stop-color="#000307" />
                </linearGradient>
                <mask id="fc-mask-fc-9583"><rect x="-10000" y="-10000" width="20000" height="20000" fill="white" /><g id="fc-mask-rects-fc-9583"></g></mask>
            </defs>
            <path id="fc-path-fc-9583" class="fc-snake-path-fc-9583" d="" />
        </svg>
        <div id="fc-grid-fc-9583">
                <div class="fc-card " style="animation-delay: 0s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-70px, -8px) scale(3.2); opacity: 0.15;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="82" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:70px; min-height:82px;"><path d="M9 21h6v-1.5H9V21zm3-19C8.48 2 5.5 4.98 5.5 8.5c0 2.85 1.43 5.5 3.5 6.95V19h6v-3.55c2.07-1.44 3.5-4.1 3.5-6.95C18.5 4.98 15.52 2 12 2z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject</h3><p>Phenomena of quantum physics </p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.2s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-70px, -8px) scale(3.2); opacity: 0.15;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="66" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:70px; min-height:66px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject content</h3><p>Physics (coincidence, anticorrelation, interference, Hong-Ou-Mandel, entanglement, Franson)</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.4s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="98" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:98px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Up to 4 players per group</h3><p>Ideal for small groups – cooperative and quick to get started.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.6000000000000001s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="464" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:464px;"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 6v6l4 2" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>6 experiments with different levels</h3><p>Modular experiments, each lasting 5-10 minutes, with varying degrees of difficulty</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.8s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:80px;"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12z M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Suitable for grades 11 and above</h3><p>Designed to high educational standards for learners from grade 11 onwards</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:128px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2L14 8 20 8 M16 13L8 13 M16 17L8 17 M10 9L8 9" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Developed for the University of Leipzig</h3><p>This app was developed in collaboration with the Department of Physics Education at the University of Leipzig.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1.2000000000000002s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:62px;"><path d="M12 18h.01M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>For tablets und smartphones</h3><p>Compatible with iOS and Android, no additional devices required.</p></div>
                </div>
                <div class="fc-card variant-compact" style="animation-delay: 1.4000000000000001s; padding-top: 20px;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-230px, -30px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon-img-free"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/uni_leipzig_logo_v2.svg" style="transform: translate(0px, -15px) scale(1);" alt="Cooperational partner" /></div>
                    </div>
                    <div class="fc-content"><h3>Cooperational partner</h3><p>Reise in die Arktis ist eine eigenständige Produktion von heartucate</p></div>
                </div></div>
        
                <div class="fc-action-wrapper-fc-9583">
                    <a href="" class="fc-action-btn-fc-9583 fc-btn-reveal">Learn more</a>
                </div>
            
    </div>
</div>
<script>(function(){
    const uid = "fc-9583";
    const s = document.getElementById('fc-section-'+uid);
    const img = s.querySelector('.fc-side-image-'+uid);
    const pathEl = document.getElementById('fc-path-'+uid);
    
    function updP(){
        const grid = document.getElementById('fc-grid-'+uid);
        const path = document.getElementById('fc-path-'+uid);
        const maskG = document.getElementById('fc-mask-rects-'+uid);
        if(!grid || !path || !maskG) return;
        
        const cardsEl = Array.from(grid.children);
        if(cardsEl.length < 2) return;
        
        const containerWidth = grid.offsetWidth;
        
        // CORRECTION: Add Grid Top/Left relative to container to items position
        // Because the SVG is absolute to the WRAPPER, not the GRID.
        const gridTop = grid.offsetTop;
        const gridLeft = grid.offsetLeft;

        const items = cardsEl.map(el => {
            const w = el.offsetWidth;
            const h = el.offsetHeight;
            const x = el.offsetLeft + gridLeft;
            const y = el.offsetTop + gridTop;
            return { el, x, y, w, h, cx: x + w/2, cy: y + h/2, yTop: y };
        });

        const isMobile = window.innerWidth < 640;

        const rows = [];
        items.forEach(item => {
            const row = rows.find(r => Math.abs(r[0].yTop - item.yTop) < 20);
            if(row) row.push(item); else rows.push([item]);
        });
        rows.sort((a,b) => a[0].yTop - b[0].yTop);

        let snakeList = [];
        rows.forEach((row, idx) => {
            row.sort((a,b) => a.cx - b.cx); 
            if(idx % 2 !== 0) row.reverse(); 
            snakeList = snakeList.concat(row);
        });

        let d = "";
        let maskHTML = "";
        
        snakeList.forEach((item, i) => {
            maskHTML += `<rect x="${item.x}" y="${item.y}" width="${item.w}" height="${item.h}" rx="20" ry="20" fill="black" />`;
            const currX = item.cx;
            const currY = item.cy;

            if (i === 0) d += `M ${currX} ${currY}`;
            else {
                const prev = snakeList[i - 1];
                const prevX = prev.cx;
                const prevY = prev.cy;
                
                if(isMobile) {
                    const direction = (i % 2 === 0) ? 1 : -1;
                    const amplitude = 60;
                    const cp1X = prevX + (amplitude * direction);
                    const cp1Y = prevY + (currY - prevY) * 0.5;
                    const cp2X = currX + (amplitude * direction);
                    const cp2Y = currY - (currY - prevY) * 0.5;
                    d += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${currX} ${currY}`;
                } else {
                    const isVerticalDrop = Math.abs(currY - prevY) > 50;
                    if (!isVerticalDrop) {
                        const hang = 0;
                        d += ` C ${prevX + (currX-prevX)*0.5} ${prevY + hang}, ${prevX + (currX-prevX)*0.5} ${currY + hang}, ${currX} ${currY}`;
                    } else {
                        const bulge = 60;
                        const dir = (prevX > containerWidth / 2) ? 1 : -1; 
                        d += ` C ${prevX + (bulge * dir)} ${prevY + (currY-prevY)*0.1}, ${currX + (bulge * dir)} ${currY - (currY-prevY)*0.1}, ${currX} ${currY}`;
                    }
                }
            }
        });
        path.setAttribute("d", d);
        maskG.innerHTML = maskHTML;
        
        if(path) {
            const len = path.getTotalLength();
            if(!s.classList.contains('fc-in-view')){
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = len;
            } else {
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = 0;
            }
        }
    }

    const ro = new ResizeObserver(() => updP());
    ro.observe(s);

    const o = new IntersectionObserver((e)=>{ 
        e.forEach(entry => { 
            if(entry.isIntersecting) { 
                s.classList.add('fc-in-view'); 
                const path = document.getElementById('fc-path-'+uid);
                if(path) {
                    const len = path.getTotalLength();
                    path.style.strokeDasharray = len;
                    path.style.strokeDashoffset = len;
                    path.getBoundingClientRect();
                    const duration = 8 * 0.4 + 0.5;
                    path.style.transition = `stroke-dashoffset ${duration}s ease-out`;
                    path.style.strokeDashoffset = '0';
                }
                setTimeout(()=>{s.classList.add('fc-interactive');}, 2000); 
                setTimeout(updP, 100); 
                setTimeout(updP, 1200); 
                o.disconnect(); 
            } 
        }); 
    }, { threshold: 0.1 });
    o.observe(s);
    
    // TILT LOGIC FOR CARDS AND BUTTON
    const tiltElements = document.querySelectorAll('#fc-wrap-'+uid+' .fc-card, #fc-wrap-'+uid+' .fc-action-btn-'+uid);
    tiltElements.forEach(el=>{
        el.addEventListener('animationend', () => {
            el.style.animation = 'none'; 
            el.style.opacity = '1';
            el.style.transform = 'translateZ(0)';
        });

        el.addEventListener('mousemove',(e)=>{
            const rect=el.getBoundingClientRect();
            const x=e.clientX-rect.left; const y=e.clientY-rect.top;
            const centerX=rect.width/2; const centerY=rect.height/2;
            const rotateX=((y-centerY)/centerY)*-5; const rotateY=((x-centerX)/centerX)*5;
            // BUTTON SCALES DIFFERENTLY
            const scale = el.classList.contains('fc-action-btn-'+uid) ? 1.05 : 1.02;
            el.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
        });
        el.addEventListener('mouseleave',()=>{ 
            el.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1) translateZ(0)'; 
        });
    });

    if(img && window.innerWidth > 1024) {
        s.addEventListener('mousemove', (e) => {
            if(!s.classList.contains('fc-interactive')) return;
            const rect = s.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;
            img.style.transform = `translateY(-50%) scale(0.9) perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) translateX(${x * -20}px) translateY(${y * -20}px)`;
        });
        s.addEventListener('mouseleave', () => {
            img.style.transform = `translateY(-50%) scale(0.9)`;
        });
    }
    
    window.addEventListener('load', updP);
    window.addEventListener('resize', updP);
})();</script><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-0 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-max-width:480px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-1 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><img fetchpriority="high" decoding="async" width="1483" height="1071" title="quantumlab with shadow" src="https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow.png" alt class="img-responsive wp-image-57384" srcset="https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow-200x144.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow-400x289.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow-600x433.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow-800x578.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow-1200x867.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/quantumlab-with-shadow.png 1483w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-1 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#002c50;--awb-margin-top:55px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">The high-tech laboratory for your pocket</h3></div><div class="fusion-text fusion-text-1 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>No more dry theory and expensive equipment. The QuantumLab app, developed on behalf of the University of Leipzig, transforms your smartphone or tablet into a fully-fledged research laboratory. Thanks to innovative XR technology (for Android &amp; iOS), you can bring complex physical structures directly to your school desk. Make the invisible visible and experience quantum physics in a way that has never been possible before – without laser safety goggles, but with complete transparency.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-2 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-padding-top:55px;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#002c50;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">6 experiments, countless moments of revelation</h3></div><div class="fusion-text fusion-text-2 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>Are you ready to push the boundaries of classical physics? Master six fascinating experiments—from fundamental interference and coincidence to the famous Hong-Ou-Mandel effect. Each experiment challenges you with different levels of difficulty: start with the basics and work your way up until you truly understand the intricacies of quantum mechanics. This turns abstract knowledge into tangible fascination.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-3 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-max-width:270px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-2 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.3" data-animationOffset="top-into-view"><img decoding="async" width="411" height="491" title="Kristall" src="https://heartucate.eu/wp-content/uploads/2025/12/Kristall.png" alt class="img-responsive wp-image-57385" srcset="https://heartucate.eu/wp-content/uploads/2025/12/Kristall-200x239.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/Kristall-400x478.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/Kristall.png 411w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 411px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><style>
#bento-2056 { position: relative; width: 100vw; left: 50%; margin-left: -50vw; box-sizing: border-box; font-family: 'Geometria', sans-serif; padding: 80px 40px; background: transparent; overflow: hidden; }
@media(max-width: 768px) { #bento-2056 { padding: 40px 15px; } }
#bento-2056::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #4F46E5, #818CF8, #C7D2FE, #312E81); opacity: 0.15; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); }
#bento-2056 .bento-grid { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 20px; max-width: 1200px; margin: 0 auto; grid-auto-rows: 90px; }
@media(max-width: 1200px) { #bento-2056 .bento-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; } }
@media(max-width: 800px) { #bento-2056 .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }
#bento-2056 .bento-item { position: relative; border-radius: 24px; transform-style: preserve-3d; cursor: pointer; transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
#bento-2056 .span-c-1 { grid-column: span 1; } #bento-2056 .span-c-2 { grid-column: span 2; } #bento-2056 .span-c-3 { grid-column: span 3; } #bento-2056 .span-c-4 { grid-column: span 4; } #bento-2056 .span-c-5 { grid-column: span 5; } #bento-2056 .span-c-6 { grid-column: span 6; }
#bento-2056 .span-r-1 { grid-row: span 1; } #bento-2056 .span-r-2 { grid-row: span 2; } #bento-2056 .span-r-3 { grid-row: span 3; } #bento-2056 .span-r-4 { grid-row: span 4; } #bento-2056 .span-r-5 { grid-row: span 5; } #bento-2056 .span-r-6 { grid-row: span 6; }
@media(max-width: 800px) { #bento-2056 .bento-item { grid-column: span 1 !important; grid-row: span 1 !important; } #bento-2056 .bento-item.span-c-3, #bento-2056 .bento-item.span-c-4, #bento-2056 .bento-item.span-c-5, #bento-2056 .bento-item.span-c-6 { grid-column: span 2 !important; grid-row: span 2 !important; } }
#bento-2056 .bento-item.expanded { grid-column: span var(--exp-c, 4) !important; grid-row: span var(--exp-r, 4) !important; z-index: 100; }
@media(max-width: 1200px) { #bento-2056 .bento-item.expanded { grid-column: span min(var(--exp-c, 4), 4) !important; } }
@media(max-width: 800px) { #bento-2056 .bento-item.expanded { grid-column: span 2 !important; grid-row: span 3 !important; } #bento-2056 .bento-item.expanded[data-type="video"] { aspect-ratio: 16/9 !important; height: auto !important; min-height: unset !important; grid-row: span 2 !important; } }
#bento-2056 .bento-grid.has-expanded .bento-item:not(.expanded) { opacity: 0.4; transform: scale(0.96); filter: grayscale(100%); pointer-events: auto; }
#bento-2056 .bento-inner { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease-out; transform: translateZ(0); }
#bento-2056 .bento-item.expanded .bento-inner { transform: none !important; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5); border: 3px solid #4F46E5; }
#bento-2056 .bento-warp-bg { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, #4F46E5, #818CF8); opacity: 0; z-index: -1; transform: scale(0.8); pointer-events: none; }
@keyframes warpShock-bento-2056 { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.4); } }
#bento-2056 .bento-item.expanded .bento-warp-bg { animation: warpShock-bento-2056 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#bento-2056 .bento-media-wrap { width: 100%; height: 100%; position: relative; }
#bento-2056 img, #bento-2056 video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#bento-2056 .bento-item:not(.expanded):hover img { transform: scale(1.08); }
#bento-2056 .bento-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 40px; text-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; transition: opacity 0.3s; opacity: 0; }
#bento-2056 .bento-item[data-type="video"]:not(.expanded):hover .bento-play-icon { opacity: 1; }
#bento-2056 .bento-item.expanded .bento-play-icon { display: none; }
#bento-2056 .bento-close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border-radius: 50%; color: white; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 101; opacity: 0; pointer-events: none; transform: scale(0.8); transition: all 0.4s ease; }
#bento-2056 .bento-item.expanded .bento-close-btn { opacity: 1; pointer-events: all; transform: scale(1); }
#bento-2056 .bento-close-btn:hover { background: #C63F40; transform: scale(1.1); }
#bento-2056 .bento-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; }
#bento-2056 .bento-item:hover:not(.expanded) .bento-overlay { opacity: 1; transform: translateY(0); }
#bento-2056 .bento-item.expanded .bento-overlay { opacity: 0; }
#bento-2056 h3 { margin: 0; color: white; font-size: 18px; font-weight: 700; }
</style>
<div id="bento-2056"><div class="bento-grid" id="grid-bento-2056">
                <div class="bento-item span-c-2 span-r-2 js-bento-card" data-type="image" style="--exp-c: 5; --exp-r: 5;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/lab6.jpeg" alt="VR" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Lab1</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-2 js-bento-card" data-type="image" style="--exp-c: 5; --exp-r: 5;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/lab2.jpeg" alt="Video" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Lab2</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-4 js-bento-card" data-type="image" style="--exp-c: 5; --exp-r: 5;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/lab3.jpeg" alt="Detail" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Lab3</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-2 js-bento-card" data-type="image" style="--exp-c: 5; --exp-r: 5;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/lab4.jpeg" alt="Atmo" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Lab4</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-2 js-bento-card" data-type="image" style="--exp-c: 5; --exp-r: 5;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/lab7.jpeg" alt="Clean" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Lab5</h3></div>
                    </div>
                </div></div></div>
<script>(function(){const grid=document.getElementById('grid-bento-2056'),cards=grid.querySelectorAll('.js-bento-card');cards.forEach(el=>{const vid=el.querySelector('video'),closeBtn=el.querySelector('.bento-close-btn'),inner=el.querySelector('.bento-inner');el.addEventListener('mousemove',(e)=>{if(el.classList.contains('expanded'))return;const r=el.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,cX=r.width/2,cY=r.height/2,rX=((y-cY)/cY)*-4,rY=((x-cX)/cX)*4;inner.style.transform=`perspective(1000px) rotateX(${rX}deg) rotateY(${rY}deg) scale(1.02)`});el.addEventListener('mouseleave',()=>{if(!el.classList.contains('expanded'))inner.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1)'});el.addEventListener('click',(e)=>{if(el.classList.contains('expanded')&&vid)return;if(el.classList.contains('expanded')&&!vid)return;cards.forEach(c=>{const cVid=c.querySelector('video');if(cVid){cVid.muted=true;cVid.loop=true;cVid.removeAttribute('controls');cVid.play()}c.classList.remove('expanded')});grid.classList.add('has-expanded');el.classList.add('expanded');inner.style.transform='';if(vid){vid.currentTime=0;vid.muted=false;vid.loop=false;vid.setAttribute('controls','true');vid.play()}setTimeout(()=>el.scrollIntoView({behavior:'smooth',block:'center'}),400)});if(closeBtn){closeBtn.addEventListener('click',(e)=>{e.stopPropagation();el.classList.remove('expanded');grid.classList.remove('has-expanded');if(vid){vid.muted=true;vid.loop=true;vid.removeAttribute('controls');vid.play()}})}})})();</script><div class="fusion-text fusion-text-3"><h2 style="color: #002c50;">Credits:</h2>
</div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-4 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-4"><p><strong style="color: #002c50;">Development:</strong><br />
Heartucate GmbH (2025) im Auftrag der Universität Leipzig, Professur für Physikdidaktik unter der Leitung von Prof. Dr. Philipp Bitzenbauer</p>
<p><b><span style="color: #002c50;">Conceptual original work:</span><br />
</b><span style="background-color: rgba(0, 0, 0, 0);">QuantumLab, entwickelt von Dr. Patrick Bronner und Prof. Dr. Jan-Peter Meyn</span></p>
<p><strong><span style="color: #002c50;">Technical Lead:</span><br />
</strong>Vincent Schiller</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-5 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-5"><p><b><span style="color: #002c50;">Concept app:<br />
</span></b><span style="color: #002c50;"><span style="color: #4e4e4e;">Franziska Weser, </span><br />
</span>Prof. Dr. Philipp Bitzenbauer</p>
<p><span style="color: #003366;"><b>Technical development:</b></span><br />
Vincent Schiller, Valentin Behrendt</p>
<p><b><span style="color: #002c50;">UI/UX Design:</span><br />
</b>Yannick Stritzke</p>
<p><b><span style="color: #003366;">Scientific advice:</span><br />
</b>Prof. Dr. Philipp Bitzenbauer, Judith Schmid, Malte Ubben</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-6 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-6"><p><span style="color: #002c50;"><b>Client:</b></span></p>
</div><div class="fusion-image-element " style="--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-3 hover-type-none"><img decoding="async" width="337" height="141" title="uni_leipzig_logo_v2" src="https://heartucate.eu/wp-content/uploads/2025/12/uni_leipzig_logo_v2.svg" alt class="img-responsive wp-image-57380"/></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-7 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"></div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/quantumlab-eng/">QuantumLab</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Damaskuszimmer VR Editor</title>
		<link>https://heartucate.eu/en/cooperations/damaskuszimmer-vreditor/</link>
		
		<dc:creator><![CDATA[Heartucate-admin]]></dc:creator>
		<pubDate>Sat, 10 Jan 2026 09:00:37 +0000</pubDate>
				<category><![CDATA[Cooperations]]></category>
		<guid isPermaLink="false">https://heartucate.eu/?p=58081</guid>

					<description><![CDATA[<p>Become an architect of the Orient  Step into the role of an Ottoman architect and create a space that tells stories. With the Damascus Room VR Editor, you have access to the magnificent stylistic elements of the famous 19th-century original in Dresden. Combine richly decorated wood paneling, set atmospheric lighting accents, and  [...]</p>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/damaskuszimmer-vreditor/">Damaskuszimmer VR Editor</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;" ><div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="max-width:1248px;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion-flex-column fusion-flex-align-self-flex-start fusion-animated" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInUp" data-animationDuration="1.0" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><style>
                    #hero-track-hero-20965 { 
                        position: relative; 
                        width: 100vw; 
                        left: 50%;
                        margin-left: -50vw;
                        height: 500vh; 
                        z-index: 10; 
                    }
                    #hero-sticky-viewport-hero-20965 { 
                        position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: #1a1a1a; perspective: 1200px;
                        border-bottom-left-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                    @media(max-width: 768px) {
                        #hero-sticky-viewport-hero-20965 {
                            border-bottom-left-radius: 0px;
                            border-bottom-right-radius: 0px;
                        }
                    }

                    .vr-bg-layer-hero-20965 { position: absolute; inset: 0; z-index: 1; }
                    .vr-glow-layer-hero-20965 { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0.8; pointer-events: none; }
                    
                    .vr-content-wrapper-hero-20965 {
                        position: absolute; inset: 0; z-index: 10;
                        display: flex; align-items: center; justify-content: center;
                        transform-style: preserve-3d;
                        will-change: transform;
                    }
                    
                    .vr-sequence-container-hero-20965 {
                        position: relative;
                        width: 100%; height: 100%;
                        display: flex; align-items: center; justify-content: center;
                        transform-style: preserve-3d;
                        transform: scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                        transition: transform 0.5s ease-out; /* Smooth warp */
                    }
                    @media(max-width: 768px) {
                        .vr-sequence-container-hero-20965 { transform: scale(1.95) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
                    }

                    /* DOUBLE BUFFER SLOTS */
                    .vr-seq-img-hero-20965 {
                        position: absolute;
                        top: 50%; left: 50%;
                        transform: translate(-50%, -50%);
                        max-width: 100%; max-height: 100%;
                        object-fit: contain;
                        width: auto; height: auto;
                        will-change: opacity;
                        backface-visibility: hidden;
                    }

                    #pannellum-container-hero-20965 { 
                        position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; 
                        opacity: 0; pointer-events: none; transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1); 
                        z-index: 50; 
                    }
                    #pannellum-container-hero-20965.visible { opacity: 1; pointer-events: all; }

                    .vr-overlay-text-hero-20965 {
                        position: absolute;
                        font-family: 'Geometria', sans-serif;
                        color: #ffffff;
                        font-weight: 800;
                        font-size: 3rem;
                        white-space: nowrap;
                        text-align: center;
                        pointer-events: none;
                        transform-style: preserve-3d;
                        will-change: opacity, transform;
                        z-index: 30;
                        top: 77%; left: 35%; transform: translate(-50%, -50%) translateZ(50px) scale(2.3);
                        opacity: 1;
                    }
                    .vr-overlay-logo-hero-20965 {
                        position: absolute;
                        pointer-events: none;
                        transform-style: preserve-3d;
                        will-change: opacity, transform;
                        z-index: 30;
                        max-width: 80vw;
                        top: 135%; left: 20%; transform: translate(-50%, -50%) translateZ(125px) scale(1);
                        opacity: 1;
                    }
                    .vr-overlay-logo-hero-20965 img { width: 100%; height: auto; display: block; }

                    @media(max-width: 768px) {
                        .vr-overlay-text-hero-20965 { top: 66%; left: 50%; transform: translate(-50%, -50%) translateZ(50px) scale(0.7); opacity: 1; }
                        .vr-overlay-logo-hero-20965 { top: 105%; left: 50%; transform: translate(-50%, -50%) translateZ(80px) scale(2.5); opacity: 1; }
                    }

                    /* EXIT BUTTON (MOBILE ONLY) */
                    .vr-scroll-down-btn-hero-20965 {
                        display: none;
                        position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
                        z-index: 100;
                        background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
                        border: 1px solid rgba(255,255,255,0.4);
                        color: white; width: 44px; height: 44px; border-radius: 50%;
                        align-items: center; justify-content: center;
                        cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
                        animation: vrPulse 2s infinite;
                    }
                    @media(max-width: 768px) { .vr-scroll-down-btn-hero-20965 { display: flex; } }
                    @keyframes vrPulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); } }
                </style>
                <div id="hero-track-hero-20965">
                    <div id="hero-sticky-viewport-hero-20965">
                        <div class="vr-bg-layer-hero-20965"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
                        <div class="vr-glow-layer-hero-20965"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
                        
                        <div class="vr-content-wrapper-hero-20965">
                            <div id="vr-seq-wrap-hero-20965" class="vr-sequence-container-hero-20965">
                                <img id="vr-slot0-hero-20965" class="vr-seq-img-hero-20965" src="https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer01.png" style="z-index: 1; opacity: 1;" decoding="sync" alt="" />
                                <img id="vr-slot1-hero-20965" class="vr-seq-img-hero-20965" src="https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer01.png" style="z-index: 2; opacity: 0;" decoding="sync" alt="" />
                            </div>
                            <div id="vr-text-hero-20965" class="vr-overlay-text-hero-20965">Damaskuszimmer</div>
                            <div id="vr-logo-hero-20965" class="vr-overlay-logo-hero-20965"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/SKD_Logo_oben_L_Weiss_sRGB-scaled.png" alt="VR Logo" /></div>
                        </div>

                        <div id="pannellum-container-hero-20965">
                            <button id="vr-exit-btn-hero-20965" class="vr-scroll-down-btn-hero-20965"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 13l5 5 5-5M7 6l5 5 5-5"/></svg></button>
                        </div>
                    </div>
                </div>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
                <script>
                
            (function(){
                if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
                    var d = document.createElement('div');
                    d.style.cssText = "position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:white;color:#333;padding:12px 20px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2);z-index:999999;font-family:sans-serif;font-size:13px;display:flex;align-items:center;gap:15px;border:1px solid rgba(0,0,0,0.05);max-width:90vw;width:auto;";
                    d.innerHTML = "<div style='display:flex;flex-direction:column;gap:4px;'><strong>Hinweis zur Darstellung der Seite in Firefox</strong><span style='opacity:0.8;line-height:1.4;'>Der Firefox Browser kann dieses 3D-Element leider nicht korrekt darstellen. Aktuell sind wir daran, das Problem zu lösen.<br>Wir empfehlen, diese Website mit einem <strong>Chromium Browser</strong> (Chrome, Edge, etc.) zu öffnen.</span></div>";
                    
                    var b = document.createElement('button');
                    b.innerHTML = "✕";
                    b.style.cssText = "background:#f0f0f0;color:#333;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;";
                    b.onclick = function(){ d.remove(); };
                    
                    d.appendChild(b);
                    document.body.appendChild(d);
                }
            })();
            
                document.addEventListener("DOMContentLoaded", function() {
                    const track = document.getElementById('hero-track-hero-20965');
                    const slot0 = document.getElementById('vr-slot0-hero-20965');
                    const slot1 = document.getElementById('vr-slot1-hero-20965');
                    const seqWrap = document.getElementById('vr-seq-wrap-hero-20965');
                    const panoCont = document.getElementById('pannellum-container-hero-20965');
                    const overlayText = document.getElementById('vr-text-hero-20965');
                    const overlayLogo = document.getElementById('vr-logo-hero-20965');
                    const exitBtn = document.getElementById('vr-exit-btn-hero-20965');
                    
                    const images = ["https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer01.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer02.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer03.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer04.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer05.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer06.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer07.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer08.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer09.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer10.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer11.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer12.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer13.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer14.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer15.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer16.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer17.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer18.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer19.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer20.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer21.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer22.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer23.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer24.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer25.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer26.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer27.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer28.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer29.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer30.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer31.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer32.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer33.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer34.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer35.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer36.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer37.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer38.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer39.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer40.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer41.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer42.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer43.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer44.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer45.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer46.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer47.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer48.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer49.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer50.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer51.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer52.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer53.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer54.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer55.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer56.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer57.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer58.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer59.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer60.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer61.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer62.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer63.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer64.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer65.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer66.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer67.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer68.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer69.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer70.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer71.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer72.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer73.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer74.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer75.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer76.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer77.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer78.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer79.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer80.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer81.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer82.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer83.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer84.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer85.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer86.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer87.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer88.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer89.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer90.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer91.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer92.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer93.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer94.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer95.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer96.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer97.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer98.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer99.png","https://heartucate.eu/wp-content/uploads/2025/12/damaskuszimmer100.png"];
                    const PANO_IMG = "https://heartucate.eu/content/projects/damaskuszimmer/hero-section/4096x2048/360.png";
                    let panoViewer = null;

                    // EXIT BUTTON LOGIC
                    if(exitBtn) {
                        exitBtn.addEventListener('click', function() {
                            window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });
                        });
                    }

                    // Preload Images
                    if(images.length > 0) images.forEach(src => { const i = new Image(); i.src = src; });

                    function update() {
                        if (!track || images.length === 0) return;
                        const rect = track.getBoundingClientRect();
                        let scrollP = Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
                        
                        // TIMING CONSTANTS
                        const SEQ_END = 0.70;   // Sequence finishes
                        const FADE_START = 0.70; // Pano fade starts
                        const FADE_END = 0.80;   // Pano fully visible
                        // 0.80 - 1.00 is buffer zone (Viewer active)

                        // 1. OVERLAY FADE OUT
                        const fadeOutEnd = 0.5;
                        let overlayOp = 1;
                        if(scrollP > 0) {
                             overlayOp = 1 - (scrollP / fadeOutEnd);
                             if(overlayOp < 0) overlayOp = 0;
                        }
                        if(overlayText) overlayText.style.opacity = overlayOp;
                        if(overlayLogo) overlayLogo.style.opacity = overlayOp;

                        // 2. SEQUENCE LOGIC (DOUBLE BUFFER)
                        if (scrollP < FADE_END) {
                            panoCont.classList.remove('visible');
                            if(seqWrap) seqWrap.style.opacity = 1;
                            
                            // Warp Reset
                            seqWrap.style.transform = window.innerWidth <= 768 ? 'scale(1.95) rotateX(0deg) rotateY(0deg) rotateZ(0deg)' : 'scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)';

                            // Map 0 -> 0.7 to 0 -> 1
                            const seqProgress = Math.min(scrollP / SEQ_END, 1.0);
                            const totalFrames = images.length - 1;
                            const floatIndex = seqProgress * totalFrames;
                            const idxBase = Math.floor(floatIndex);
                            const idxNext = Math.min(totalFrames, idxBase + 1);
                            const mix = floatIndex - idxBase;

                            const srcBase = images[idxBase];
                            const srcNext = images[idxNext];

                            // Buffer Swap
                            if(slot0.getAttribute('src') !== srcBase) slot0.src = srcBase;
                            if(slot1.getAttribute('src') !== srcNext) slot1.src = srcNext;
                            
                            slot0.style.opacity = 1;
                            slot1.style.opacity = mix;
                            
                            // WARP ZOOM TRANSITION (0.7 -> 0.8)
                            if (scrollP > SEQ_END) {
                                const warpProgress = (scrollP - SEQ_END) / (FADE_END - SEQ_END); // 0 to 1
                                // Fade out sequence wrapper
                                seqWrap.style.opacity = 1 - warpProgress;
                                // Scale UP (Warp)
                                const baseTrans = window.innerWidth <= 768 ? 'scale(1.95) rotateX(0deg) rotateY(0deg) rotateZ(0deg)' : 'scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)';
                                seqWrap.style.transform = baseTrans + ' scale(' + (1 + warpProgress * 4) + ')';
                            }

                        } else {
                            // 3. PANO ACTIVE
                            if(!panoCont.classList.contains('visible')) {
                                panoCont.classList.add('visible');
                                if(!panoViewer && window.pannellum && PANO_IMG) {
                                    panoViewer = window.pannellum.viewer('pannellum-container-hero-20965', {
                                        "type": "equirectangular",
                                        "panorama": PANO_IMG,
                                        "autoLoad": true,
                                        "autoRotate": -2,
                                        "compass": false,
                                        "showControls": true,
                                        "mouseZoom": false
                                    });
                                }
                            }
                        }
                    }
                    window.addEventListener('scroll', () => window.requestAnimationFrame(update), { passive: true });
                    window.addEventListener('resize', update);
                });
                </script>
<style>
#fc-section-fc-2281 { 
    position: relative; 
    width: 100vw; 
    left: 50%; 
    margin-left: -50vw; 
    box-sizing: border-box;
    padding-top: 160px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 150px;
    margin-top: -50px; 
    overflow: hidden; 
    font-family: 'Geometria', 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    #fc-section-fc-2281 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-top: 0px !important;
    }
}

#fc-wrap-fc-2281 { position: relative; width: 100%; max-width: 1200px; z-index: 10; }

/* HEADER STYLES */
.fc-header-fc-2281 {
    margin-bottom: 60px;
    text-align: left;
    position: relative;
    z-index: 20;
}
.fc-header-fc-2281 h2 {
    font-size: 52px;
    font-weight: 800;
    color: #550917;
    margin: 0;
    line-height: 1.1;
}
.fc-header-logo-fc-2281 {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 0px;
    object-fit: contain;
    transform: translateX(185px);
}
@media(max-width: 640px) {
    .fc-header-fc-2281 { text-align: center; } 
    .fc-header-fc-2281 h2 { font-size: 36px; } 
    .fc-header-logo-fc-2281 { transform: translateX(0px); margin-left: auto; margin-right: auto; }
}

/* BUTTON STYLES */
.fc-action-wrapper-fc-2281 {
    margin-top: 35px;
    text-align: center;
    position: relative;
    z-index: 20;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media(min-width: 1280px) {
    .fc-action-wrapper-fc-2281 {
        margin-right: 25% !important;
        max-width: none !important;
    }
}

.fc-action-btn-fc-2281 {
    display: inline-block;
    background: #ED6D32;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 32px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform-style: preserve-3d; 
    perspective: 1000px;
    will-change: transform;
    transition: box-shadow 0.2s ease;
}
.fc-action-btn-fc-2281:hover {
    color: #ffffff !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.2);
}

.fc-btn-reveal { opacity: 0; transform: translateY(20px); }
.fc-in-view .fc-btn-reveal {
    animation: fcHeaderPop-fc-2281 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.8s; 
}

/* HEADER REVEAL ANIMATION */
@keyframes fcHeaderPop-fc-2281 {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    60% { transform: translateY(-5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-header-reveal { opacity: 0; }
.fc-in-view .fc-header-reveal {
    animation: fcHeaderPop-fc-2281 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fc-header-logo-fc-2281 { animation-delay: 0.1s; }
.fc-header-fc-2281 h2 { animation-delay: 0.2s; }

.fc-bg-gradient-fc-2281 { 
    position: absolute; inset: 0; z-index: 0; 
    background: linear-gradient(-45deg, #791811, #22302e, #7b5c02, #285d12); 
    background-size: 400% 400%; 
    animation: fcGradient-fc-2281 20s ease infinite; 
    opacity: 0.82; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
}

.fc-bg-grain-fc-2281 { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
@keyframes fcGradient-fc-2281 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@keyframes fcPop-fc-2281 {
    0% { opacity: 0; transform: scale(0.5) translateY(50px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fc-card { 
    opacity: 0; 
    transform: translateZ(0); 
    will-change: transform, opacity;
}

.fc-in-view .fc-card { 
    animation: fcPop-fc-2281 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}

.fc-side-image-fc-2281 { opacity: 0; transform: translateY(-50%) scale(0.6) translateX(80px); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.fc-bg-heart-fc-2281 { opacity: 0; transform: translate(-10%, calc(-50% + 0%)) scale(0.8); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }

.fc-in-view .fc-side-image-fc-2281 { opacity: 1; transform: translateY(-50%) scale(0.6) translateX(0); }
.fc-in-view .fc-bg-heart-fc-2281 { opacity: 0.1; transform: translate(-10%, calc(-50% + 0%)) scale(0.5); }
.fc-interactive .fc-side-image-fc-2281 { transition: transform 0.1s ease-out !important; }

.fc-side-image-fc-2281 { display: none; position: absolute; right: -17%; top: 50%; height: 90%; width: auto; object-fit: contain; z-index: 5; pointer-events: none; filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.1)); }
.fc-bg-heart-fc-2281 { display: none; position: absolute; top: 50%; right: 0; width: 600px; height: 600px; z-index: 2; pointer-events: none; } .fc-bg-heart-fc-2281 path { fill: #ffffff; }
@media(min-width: 1280px) { .fc-side-image-fc-2281 { display: block; } .fc-bg-heart-fc-2281 { display: block; } #fc-grid-fc-2281 { margin-right: 25% !important; max-width: none !important; } }
#fc-grid-fc-2281 { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; transition: margin 0.3s; }
@media(min-width: 640px) { #fc-grid-fc-2281 { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 1024px) { #fc-grid-fc-2281 { grid-template-columns: repeat(2, 1fr); } }

.fc-card { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border-radius: 20px; 
    padding: 24px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden; 
    transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; 
    height: 100%;
}
@media(max-width: 480px) { .fc-card { flex-direction: column; align-items: center; text-align: center; } }
.fc-card:hover { box-shadow: 0 25px 50px -12px rgba(214, 68, 59, 0.15); background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.fc-icon-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; isolation: isolate; transform-style: preserve-3d; }
.fc-heart-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .fc-heart-bg path { fill: inherit; } 
.fc-card:hover .fc-heart-bg { transform: scale(1.2) rotate(15deg) translateY(-5px); opacity: 0.5; }
.fc-icon { position: relative; z-index: 20; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; transform: translateZ(0); } 
.fc-card:hover .fc-icon { transform: translateZ(50px) scale(1.1); }
.fc-icon svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.fc-content { flex: 1; z-index: 10; position: relative; transform: translateZ(20px); } .fc-content h3 { font-size: 18px; font-weight: 800; color: #1e293b; margin: 0 0 6px 0; line-height: 1.2; } .fc-content p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }

.fc-icon-img-free { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 20; transform: translateZ(0); }
.fc-card:hover .fc-icon-img-free { transform: translateZ(50px) scale(1.1); transition: transform 0.4s ease; }
.fc-icon-img-free img { width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; }

.fc-card.variant-compact {
    flex-direction: column-reverse; 
    text-align: center;
    justify-content: space-between;
    padding: 12px 20px; 
}
.fc-card.variant-compact .fc-content {
    margin-bottom: 0; 
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}
.fc-card.variant-compact p { display: none; } 

.fc-snake-svg-fc-2281 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.fc-snake-path-fc-2281 { fill: none; stroke: url(#line-grad-fc-2281); stroke-width: 11px; stroke-opacity: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(214,68,59,0.4)); mask: url(#fc-mask-fc-2281); }
</style>
<div id="fc-section-fc-2281">
    <div class="fc-bg-gradient-fc-2281"></div><div class="fc-bg-grain-fc-2281"></div>
    <svg class="fc-bg-heart-fc-2281" viewBox="0 0 79 74" xmlns="http://www.w3.org/2000/svg"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
    <img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/Damaskuszimmer2.png" class="fc-side-image-fc-2281" alt="" />
    
    <div id="fc-wrap-fc-2281">
        
                <div class="fc-header-fc-2281">
                    
                    <div class="fc-header-reveal"><h2>DAMASKUSZIMMER VR </h2></div>
                </div>
            
        
        <svg id="fc-svg-fc-2281" class="fc-snake-svg-fc-2281">
            <defs>
                <linearGradient id="line-grad-fc-2281" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#22302e" />
                    <stop offset="50%" stop-color="#791811" />
                    <stop offset="100%" stop-color="#7b5c02" />
                </linearGradient>
                <mask id="fc-mask-fc-2281"><rect x="-10000" y="-10000" width="20000" height="20000" fill="white" /><g id="fc-mask-rects-fc-2281"></g></mask>
            </defs>
            <path id="fc-path-fc-2281" class="fc-snake-path-fc-2281" d="" />
        </svg>
        <div id="fc-grid-fc-2281">
                <div class="fc-card " style="animation-delay: 0s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="98" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:98px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Single-Player</h3><p>Single-player application permanently installed in exhibition</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.2s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:80px;"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12z M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Target Group</h3><p>Visitors to the Museum of Ethnology in Dresden</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.4s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 20 10" fill="currentColor" stroke="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:78px; min-height:82px;"><path d="M13 10L11 8H9L7 10H5C4.46957 10 3.96086 9.78929 3.58579 9.41421C3.21071 9.03914 3 8.53043 3 8V2C3 1.46957 3.21071 0.960859 3.58579 0.585786C3.96086 0.210714 4.46957 0 5 0H15C15.5304 0 16.0391 0.210714 16.4142 0.585786C16.7893 0.960859 17 1.46957 17 2V8C17 8.53043 16.7893 9.03914 16.4142 9.41421C16.0391 9.78929 15.5304 10 15 10H13ZM20 7C20 7.26522 19.8946 7.51957 19.7071 7.70711C19.5196 7.89464 19.2652 8 19 8C18.7348 8 18.4804 7.89464 18.2929 7.70711C18.1054 7.51957 18 7.26522 18 7V3C18 2.73478 18.1054 2.48043 18.2929 2.29289C18.4804 2.10536 18.7348 2 19 2C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V7ZM2 7C2 7.26522 1.89464 7.51957 1.70711 7.70711C1.51957 7.89464 1.26522 8 1 8C0.734784 8 0.48043 7.89464 0.292893 7.70711C0.105357 7.51957 0 7.26522 0 7V3C0 2.73478 0.105357 2.48043 0.292893 2.29289C0.48043 2.10536 0.734784 2 1 2C1.26522 2 1.51957 2.10536 1.70711 2.29289C1.89464 2.48043 2 2.73478 2 3V7Z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>For VR glasses</h3><p>Editor application on display, mirrored in VR glasses</p></div>
                </div>
                <div class="fc-card variant-compact" style="animation-delay: 0.6000000000000001s; padding-top: 20px;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-230px, -30px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon-img-free"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/SKD_Logo_oben_M_Korall_sRGB-1.png" style="transform: translate(5px, -15px) scale(0.04);" alt="Cooperational partner" /></div>
                    </div>
                    <div class="fc-content"><h3>Cooperational partner</h3><p>Reise in die Arktis ist eine eigenständige Produktion von heartucate</p></div>
                </div></div>
        
                <div class="fc-action-wrapper-fc-2281">
                    <a href="https://voelkerkunde-dresden.skd.museum/ausstellungen/damaskuszimmer/" class="fc-action-btn-fc-2281 fc-btn-reveal">Learn more</a>
                </div>
            
    </div>
</div>
<script>(function(){
    const uid = "fc-2281";
    const s = document.getElementById('fc-section-'+uid);
    const img = s.querySelector('.fc-side-image-'+uid);
    const pathEl = document.getElementById('fc-path-'+uid);
    
    function updP(){
        const grid = document.getElementById('fc-grid-'+uid);
        const path = document.getElementById('fc-path-'+uid);
        const maskG = document.getElementById('fc-mask-rects-'+uid);
        if(!grid || !path || !maskG) return;
        
        const cardsEl = Array.from(grid.children);
        if(cardsEl.length < 2) return;
        
        const containerWidth = grid.offsetWidth;
        
        // CORRECTION: Add Grid Top/Left relative to container to items position
        // Because the SVG is absolute to the WRAPPER, not the GRID.
        const gridTop = grid.offsetTop;
        const gridLeft = grid.offsetLeft;

        const items = cardsEl.map(el => {
            const w = el.offsetWidth;
            const h = el.offsetHeight;
            const x = el.offsetLeft + gridLeft;
            const y = el.offsetTop + gridTop;
            return { el, x, y, w, h, cx: x + w/2, cy: y + h/2, yTop: y };
        });

        const isMobile = window.innerWidth < 640;

        const rows = [];
        items.forEach(item => {
            const row = rows.find(r => Math.abs(r[0].yTop - item.yTop) < 20);
            if(row) row.push(item); else rows.push([item]);
        });
        rows.sort((a,b) => a[0].yTop - b[0].yTop);

        let snakeList = [];
        rows.forEach((row, idx) => {
            row.sort((a,b) => a.cx - b.cx); 
            if(idx % 2 !== 0) row.reverse(); 
            snakeList = snakeList.concat(row);
        });

        let d = "";
        let maskHTML = "";
        
        snakeList.forEach((item, i) => {
            maskHTML += `<rect x="${item.x}" y="${item.y}" width="${item.w}" height="${item.h}" rx="20" ry="20" fill="black" />`;
            const currX = item.cx;
            const currY = item.cy;

            if (i === 0) d += `M ${currX} ${currY}`;
            else {
                const prev = snakeList[i - 1];
                const prevX = prev.cx;
                const prevY = prev.cy;
                
                if(isMobile) {
                    const direction = (i % 2 === 0) ? 1 : -1;
                    const amplitude = 60;
                    const cp1X = prevX + (amplitude * direction);
                    const cp1Y = prevY + (currY - prevY) * 0.5;
                    const cp2X = currX + (amplitude * direction);
                    const cp2Y = currY - (currY - prevY) * 0.5;
                    d += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${currX} ${currY}`;
                } else {
                    const isVerticalDrop = Math.abs(currY - prevY) > 50;
                    if (!isVerticalDrop) {
                        const hang = 0;
                        d += ` C ${prevX + (currX-prevX)*0.5} ${prevY + hang}, ${prevX + (currX-prevX)*0.5} ${currY + hang}, ${currX} ${currY}`;
                    } else {
                        const bulge = 60;
                        const dir = (prevX > containerWidth / 2) ? 1 : -1; 
                        d += ` C ${prevX + (bulge * dir)} ${prevY + (currY-prevY)*0.1}, ${currX + (bulge * dir)} ${currY - (currY-prevY)*0.1}, ${currX} ${currY}`;
                    }
                }
            }
        });
        path.setAttribute("d", d);
        maskG.innerHTML = maskHTML;
        
        if(path) {
            const len = path.getTotalLength();
            if(!s.classList.contains('fc-in-view')){
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = len;
            } else {
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = 0;
            }
        }
    }

    const ro = new ResizeObserver(() => updP());
    ro.observe(s);

    const o = new IntersectionObserver((e)=>{ 
        e.forEach(entry => { 
            if(entry.isIntersecting) { 
                s.classList.add('fc-in-view'); 
                const path = document.getElementById('fc-path-'+uid);
                if(path) {
                    const len = path.getTotalLength();
                    path.style.strokeDasharray = len;
                    path.style.strokeDashoffset = len;
                    path.getBoundingClientRect();
                    const duration = 4 * 0.4 + 0.5;
                    path.style.transition = `stroke-dashoffset ${duration}s ease-out`;
                    path.style.strokeDashoffset = '0';
                }
                setTimeout(()=>{s.classList.add('fc-interactive');}, 2000); 
                setTimeout(updP, 100); 
                setTimeout(updP, 1200); 
                o.disconnect(); 
            } 
        }); 
    }, { threshold: 0.1 });
    o.observe(s);
    
    // TILT LOGIC FOR CARDS AND BUTTON
    const tiltElements = document.querySelectorAll('#fc-wrap-'+uid+' .fc-card, #fc-wrap-'+uid+' .fc-action-btn-'+uid);
    tiltElements.forEach(el=>{
        el.addEventListener('animationend', () => {
            el.style.animation = 'none'; 
            el.style.opacity = '1';
            el.style.transform = 'translateZ(0)';
        });

        el.addEventListener('mousemove',(e)=>{
            const rect=el.getBoundingClientRect();
            const x=e.clientX-rect.left; const y=e.clientY-rect.top;
            const centerX=rect.width/2; const centerY=rect.height/2;
            const rotateX=((y-centerY)/centerY)*-5; const rotateY=((x-centerX)/centerX)*5;
            // BUTTON SCALES DIFFERENTLY
            const scale = el.classList.contains('fc-action-btn-'+uid) ? 1.05 : 1.02;
            el.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
        });
        el.addEventListener('mouseleave',()=>{ 
            el.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1) translateZ(0)'; 
        });
    });

    if(img && window.innerWidth > 1024) {
        s.addEventListener('mousemove', (e) => {
            if(!s.classList.contains('fc-interactive')) return;
            const rect = s.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;
            img.style.transform = `translateY(-50%) scale(0.6) perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) translateX(${x * -20}px) translateY(${y * -20}px)`;
        });
        s.addEventListener('mouseleave', () => {
            img.style.transform = `translateY(-50%) scale(0.6)`;
        });
    }
    
    window.addEventListener('load', updP);
    window.addEventListener('resize', updP);
})();</script><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-8 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-margin-top:80px;--awb-max-width:400px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-4 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><img decoding="async" width="1920" height="1080" title="display_20251218_123943" src="https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943.png" alt class="img-responsive wp-image-57467" srcset="https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943-200x113.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943-400x225.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943-600x338.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943-800x450.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943-1200x675.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_123943.png 1920w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-9 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-3 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#96002d;--awb-margin-top:55px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">Become an architect of the Orient</h3></div><div class="fusion-text fusion-text-7 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>Step into the role of an Ottoman architect and create a space that tells stories. With the Damascus Room VR Editor, you have access to the magnificent stylistic elements of the famous 19th-century original in Dresden. Combine richly decorated wood paneling, set atmospheric lighting accents, and build your own personal oasis of well-being—intuitively, creatively, and with complete freedom in virtual reality.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-10 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-padding-top:55px;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-4 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#4e4e4e;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">From calligraphy to cozy corner</h3></div><div class="fusion-text fusion-text-8 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>A genuine Damascus room thrives on its details and its invitation to linger. Choose from a library of objects, furniture, and ceilings to fill the space. Arrange the traditional seating niches to offer maximum comfort to virtual visitors. Experience how individual building blocks come together to create a vibrant place of hospitality, and share your vision of modern Syrian interior design.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-11 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-margin-top:80px;--awb-max-width:400px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-5 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.3" data-animationOffset="top-into-view"><img decoding="async" width="1920" height="1080" title="display_20251218_124109" src="https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109.png" alt class="img-responsive wp-image-57469" srcset="https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109-200x113.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109-400x225.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109-600x338.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109-800x450.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109-1200x675.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/display_20251218_124109.png 1920w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-text fusion-text-9"><h2 style="color: #4e4e4e;"><strong>Credits:</strong></h2>
</div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-12 fusion_builder_column_inner_1_4 1_4 fusion-flex-column fusion-animated" style="--awb-bg-size:cover;--awb-transition:filter 300ms ease-in, transform 300ms ease-in, background-color 300ms ease-in, border-color 300ms ease-in;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInLeft" data-animationDuration="0.5" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-10" style="--awb-font-size:14px;"><p><strong><span style="color: #993300;">Development:</span></strong><br />
Heartucate GmbH (2024)</p>
<p><strong style="color: #993300;">Concept:</strong><br />
Franziska Weser<br />
<strong style="color: #993300; background-color: rgba(0, 0, 0, 0);"><br />
Technical Lead:<br />
</strong><span style="background-color: rgba(0, 0, 0, 0);">Vincent Schiller</span></p>
</div>
</div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-13 fusion_builder_column_inner_1_4 1_4 fusion-flex-column fusion-animated" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInLeft" data-animationDuration="0.5" data-animationDelay="0.2" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-11" style="--awb-font-size:14px;"><p><span style="color: #993300;"><strong>Programming and 3D:</strong></span><br />
Vincent Schiller</p>
<p><span style="color: #993300;"><strong>Project Lead:<br />
</strong></span>Jacob Franke<br />
Martin Zavesky</p>
</div>
</div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-14 fusion_builder_column_inner_1_4 1_4 fusion-flex-column fusion-animated" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInRight" data-animationDuration="0.5" data-animationDelay="0.2" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-12" style="--awb-font-size:14px;"><p><span style="color: #993300;"><strong><span style="font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);">Client:</span></strong></span></p>
</div>
<div class="fusion-image-element " style="--awb-max-width:200px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-6 hover-type-none"><img decoding="async" width="300" height="211" title="SKD_Logo_XS_Korall_sRGB" src="https://heartucate.eu/wp-content/uploads/2025/12/SKD_Logo_XS_Korall_sRGB.jpg" alt class="img-responsive wp-image-57718" srcset="https://heartucate.eu/wp-content/uploads/2025/12/SKD_Logo_XS_Korall_sRGB-200x141.jpg 200w, https://heartucate.eu/wp-content/uploads/2025/12/SKD_Logo_XS_Korall_sRGB.jpg 300w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 300px" /></span></div></div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/damaskuszimmer-vreditor/">Damaskuszimmer VR Editor</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MISSION ATTO</title>
		<link>https://heartucate.eu/en/cooperations/mission-atto-3/</link>
		
		<dc:creator><![CDATA[Heartucate-admin]]></dc:creator>
		<pubDate>Fri, 09 Jan 2026 08:58:21 +0000</pubDate>
				<category><![CDATA[Cooperations]]></category>
		<guid isPermaLink="false">https://heartucate.eu/?p=55437</guid>

					<description><![CDATA[<p>Explore the heart of the Amazon!  MISSION ATTO brings the German-Brazilian research project directly into the classroom. In collaboration with the Max Planck Institute for Biogeochemistry, interactive augmented reality lessons have been developed to supplement traditional print materials. Students in grade 8 and above explore the rainforest, understand its role as a  [...]</p>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/mission-atto-3/">MISSION ATTO</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;" ><div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="max-width:1248px;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion-flex-column fusion-flex-align-self-flex-start fusion-animated" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInUp" data-animationDuration="1.0" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<style>
  #hero-track-hero-61412 { 
      position: relative; 
      width: 100vw; 
      left: 50%;
      margin-left: -50vw;
      height: 450vh; 
      z-index: 10; 
  }
  #hero-sticky-viewport-hero-61412 { position: sticky; top: 0; width: 100vw; height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); left: 50%; right: 50%; overflow: hidden; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; perspective: 1200px; opacity: 0; transition: opacity 0.5s ease-in; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
  #hero-sticky-viewport-hero-61412.loaded { opacity: 1; }
  #hero-main-wrapper-hero-61412 { position: relative; z-index: 100; width: 90vw; max-width: 1000px; aspect-ratio: 1.455; transform-style: preserve-3d; will-change: transform; margin: auto; transition: transform 0.1s cubic-bezier(0.2, 0, 0.4, 1); }
  .hero-mask-hero-61412 { position: absolute; top: 6.5%; left: 5.3%; right: 6.6%; bottom: 8.1%; border-radius: 13px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
  .hero-gradient-hero-61412 { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 2; pointer-events: none; }
  .hero-layer-hero-61412 { position: absolute; inset: 0; transform-style: preserve-3d; }
  
  .hero-fixed-blur-layer-hero-61412 {
    position: absolute; 
    inset: 1%; 
    border-radius: 39px;
    transform: translateZ(-5px);
    opacity: 0.55;
    background-image: url('https://heartucate.eu/wp-content/uploads/2025/12/display-texture3png.png'); background-size: cover; background-position: center;
    mask-image: radial-gradient(closest-side, transparent 30%, black 80%); -webkit-mask-image: radial-gradient(closest-side, transparent 30%, black 80%);
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 0; 
  }

  #hero-back-hero-61412 { 
      z-index: 10; 
      transform-style: preserve-3d; 
      transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); 
  }
  
  .hero-frame-img-hero-61412 { transform: translateZ(2px); z-index: 20; }
  
  #hero-room-group-hero-61412 { z-index: 20; pointer-events: none; transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
  .hero-room-img-layer-hero-61412 { position: absolute; width: 80%; height: auto; transform-origin: center center; top: -23%; left: 50%; transform: translate(-50%, 0) scale(0.5); will-change: opacity, transform; backface-visibility: hidden; }
  #hero-front-hero-61412 { z-index: 30; pointer-events: none; transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); }
  
  .hero-bubble-hero-61412 {
    position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: linear-gradient(135deg, #325e2dD9, #00806eD9, #678f6dD9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-radius: 99px; color: white; font-weight: 700; font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1000; pointer-events: none; 
    transform: translate(-50%, -50%) translateZ(150px) scale(0); opacity: 0;
    will-change: transform, opacity;
    white-space: nowrap;
  }
  
  @keyframes heroPop-hero-61412 {
    0% { opacity: 0; transform: translate(-50%, -50%) translateZ(150px) scale(0.5); }
    60% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1); }
  }

  .hero-bubble-hero-61412.visible { 
      animation: heroPop-hero-61412 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
  }
  
  .hero-bubble-hero-61412:nth-of-type(1) { animation-delay: 0.1s; }
  .hero-bubble-hero-61412:nth-of-type(2) { animation-delay: 0.2s; }
  .hero-bubble-hero-61412:nth-of-type(3) { animation-delay: 0.3s; }
  .hero-bubble-hero-61412:nth-of-type(4) { animation-delay: 0.4s; }
  .hero-bubble-hero-61412:nth-of-type(5) { animation-delay: 0.5s; }
  .hero-bubble-hero-61412:nth-of-type(6) { animation-delay: 0.6s; }

  .hero-bubble-icon-hero-61412 { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: white; }

  @keyframes spinIn-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); opacity: 1; } }
  @keyframes spinInFront-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
  @keyframes spinInRoom-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }

  @media (max-width: 768px) {
      .hero-bubble-hero-61412 { display: none !important; }
      #hero-track-hero-61412 { height: 450vh; }
      #hero-sticky-viewport-hero-61412 { perspective: 1200px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
      #hero-main-wrapper-hero-61412 { width: 95vw; max-width: none; aspect-ratio: 0.54; }
      .hero-mask-hero-61412 { top: 10%; left: 7.2%; right: 7.2%; bottom: 4.6%; border-radius: 43px; }
      .hero-gradient-hero-61412 { height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
      
      .hero-fixed-blur-layer-hero-61412 { 
          
         opacity: 0.5;
         transform: translateZ(-5px);
         border-radius: 37px;
         
      }

      #hero-back-hero-61412 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); }
      #hero-room-group-hero-61412 { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
      .hero-room-img-layer-hero-61412 { top: 25%; left: 50%; transform: translate(-50%, 0) scale(0.95); }
      #hero-front-hero-61412 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); }
      @keyframes spinIn-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); opacity: 1; } }
      @keyframes spinInFront-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
      @keyframes spinInRoom-hero-61412 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }
  }
  .animate-entry-hero-61412 { animation: spinIn-hero-61412 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-room-hero-61412 { animation: spinInRoom-hero-61412 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  #hero-front-hero-61412.animate-entry-hero-61412 { animation: spinInFront-hero-61412 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
</style>
<div id="hero-track-hero-61412">
  <div id="hero-sticky-viewport-hero-61412">
    <div style="position: absolute; inset: 0; z-index: 1;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/mission-atto-bg.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div style="position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0.8;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div id="hero-main-wrapper-hero-61412">
      <div id="hero-back-hero-61412" class="hero-layer-hero-61412 animate-entry-hero-61412">
        <div class="hero-fixed-blur-layer-hero-61412"></div>
        <picture class="hero-frame-img-hero-61412" style="position: absolute; inset: 0; width: 100%; height: 100%;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/iphone-mockup.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/2-tablet.png" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;" alt="" /></picture>
        <div class="hero-mask-hero-61412"></div>
      </div>
      <div id="hero-room-group-hero-61412" class="hero-layer-hero-61412 animate-room-hero-61412"><img id="hero-room-slot0-hero-61412" class="hero-room-img-layer-hero-61412" decoding="sync" src="https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/1.png" style="z-index: 1;" alt="" /><img id="hero-room-slot1-hero-61412" class="hero-room-img-layer-hero-61412" decoding="sync" src="https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/1.png" style="z-index: 1; opacity: 0;" alt="" /></div>
      <div id="hero-front-hero-61412" class="hero-layer-hero-61412 animate-entry-hero-61412"><div class="hero-mask-hero-61412"><div id="hero-gradient-el-hero-61412" class="hero-gradient-hero-61412"></div><picture style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/mission-atoo-logo.png"><img decoding="async" id="hero-logo-img-hero-61412" src="https://heartucate.eu/wp-content/uploads/2025/12/mission-atoo-logo.png" style="position: absolute; width: 40%; height: auto; z-index: 10; transform-origin: center bottom; top: 79%; left: 49%; transform: translate(-50%, -100%) scale(0.9); opacity: 1;" alt="" /></picture></div></div>
      <div id="hero-bubbles-layer-hero-61412" class="hero-layer-hero-61412" style="z-index: 100; pointer-events: none;"></div>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const track = document.getElementById('hero-track-hero-61412'), viewport = document.getElementById('hero-sticky-viewport-hero-61412'), wrapper = document.getElementById('hero-main-wrapper-hero-61412');
  const back = document.getElementById('hero-back-hero-61412'), front = document.getElementById('hero-front-hero-61412'), roomGroup = document.getElementById('hero-room-group-hero-61412');
  const bubbleLayer = document.getElementById('hero-bubbles-layer-hero-61412');
  const slots = [document.getElementById('hero-room-slot0-hero-61412'), document.getElementById('hero-room-slot1-hero-61412')], logo = document.getElementById('hero-logo-img-hero-61412'), gradient = document.getElementById('hero-gradient-el-hero-61412');
  const PARALLAX_MAX = 10;
  if(PARALLAX_MAX > 0 && window.matchMedia("(hover: hover)").matches && wrapper) { document.addEventListener('mousemove', (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 2; const y = (e.clientY / window.innerHeight - 0.5) * 2; wrapper.style.transform = `rotateY(${x * PARALLAX_MAX}deg) rotateX(${-y * PARALLAX_MAX}deg)`; }); }
  
  const SEQ_ENABLED = true;
  const SEQ_IMAGES = ["https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/1.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/2.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/3.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/4.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/5.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/6.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/7.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/8.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/9.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/10.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/11.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/12.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/13.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/14.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/15.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/16.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/17.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/18.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/19.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/20.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/21.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/22.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/23.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/24.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/25.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/26.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/27.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/28.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/29.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/30.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/31.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/32.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/33.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/34.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/35.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/36.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/37.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/38.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/39.png","https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/40.png"];
  const ASSETS = { D: { room: "https://heartucate.eu/content/projects/mission-atto/hero-section/1024x1024/1.png" }, M: { room: "https://heartucate.eu/content/projects/mission-atto/hero-section/512x512/1.png" } };
  
  const BUBBLES = [{"icon":"clock","text":"5 interactive lessons","scale":1.2,"x":20,"id":1,"visible":true,"y":30,"side":"left"},{"scale":0.9,"y":50,"visible":true,"text":"From 8th grade onwards","side":"left","icon":"target","id":2,"x":0},{"visible":true,"id":3,"y":70,"x":16,"icon":"pdf","scale":1.2,"side":"left","text":"High-quality accompanying material"},{"scale":1.2,"visible":true,"text":"Up to 10 players per group","side":"right","y":35,"x":80,"id":4,"icon":"users"},{"scale":0.9,"text":"For tablets and smartphones","y":55,"icon":"tablet","side":"right","visible":true,"id":5,"x":85},{"text":"Augmented reality desk application","y":75,"visible":true,"id":6,"scale":1.2,"icon":"vr","x":78,"side":"right"}];
  const ICONS = {"clock":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg>","users":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>","pdf":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line><polyline points=\"10 9 9 9 8 9\"></polyline></svg>","tablet":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg>","target":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><circle cx=\"12\" cy=\"12\" r=\"6\"></circle><circle cx=\"12\" cy=\"12\" r=\"2\"></circle></svg>","vr":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"></polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"></line></svg>"};
  
  if(window.innerWidth > 768 && BUBBLES.length > 0) {
      BUBBLES.forEach(b => {
          if(!b.visible) return;
          const el = document.createElement('div');
          el.className = 'hero-bubble-hero-61412';
          el.style.left = b.x + '%'; el.style.top = b.y + '%'; el.style.transform = `translate(-50%, -50%) translateZ(150px) scale(${b.scale})`;
          el.innerHTML = `<div class="hero-bubble-icon-hero-61412">${ICONS[b.icon]}</div><span>${b.text}</span>`;
          bubbleLayer.appendChild(el);
      });
  }

  if(SEQ_ENABLED && SEQ_IMAGES.length > 0) SEQ_IMAGES.forEach(src => { const img = new Image(); img.src = src; if('decode' in img) img.decode().catch(()=>{}); });
  if(viewport) viewport.classList.add('loaded');
  const unlockElements = [back, front, roomGroup];
  function unlockAnimation() { unlockElements.forEach(el => { if(el) { el.style.animation = 'none'; el.classList.remove('animate-entry-hero-61412'); el.classList.remove('animate-room-hero-61412'); } }); update(); }
  if(back) { back.addEventListener('animationend', unlockAnimation, { once: true }); setTimeout(unlockAnimation, 1600); } else { update(); }
  const DesktopS = {"logoX":49,"logoScale":0.9,"tabX":0,"tabRotZ":0,"logoY":79,"roomRotY":0,"tabRotY":11,"roomY":-23,"logoOpacity":1,"roomRotZ":0,"tabY":0,"tabScale":0.7,"roomScale":0.5,"tabRotX":0,"roomX":50}, DesktopE = {"tabX":0,"roomY":0,"logoOpacity":0,"logoScale":1.5,"logoY":150,"roomRotY":0,"roomScale":0.8,"logoX":50,"roomX":46,"tabRotZ":-27,"roomRotZ":0,"tabScale":0.7,"tabRotY":48,"tabY":0,"tabRotX":40}, DesktopSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  const MobileS = {"logoY":77,"tabScale":0.9,"roomX":50,"tabY":0,"tabX":0,"logoOpacity":1,"tabRotY":0,"tabRotZ":0,"roomRotZ":0,"roomScale":0.95,"logoX":50,"roomY":25,"tabRotX":0,"roomRotY":0,"logoScale":1.5}, MobileE = {"tabY":0,"logoY":150,"roomRotY":0,"roomY":34,"tabRotY":48,"logoOpacity":0,"roomRotZ":0,"tabRotX":40,"roomScale":0.25,"tabScale":5,"roomX":50,"tabRotZ":-27,"tabX":0,"logoScale":0.8,"logoX":50}, MobileSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  let ticking = false;
  function getProgress(globalP, startP, endP) { if (globalP <= startP) return 0; if (globalP >= endP) return 1; return (globalP - startP) / (endP - startP); }
  function lerp(start, end, t) { return start * (1 - t) + end * t; }
  
  function updateSequence(p3D, baseImg) {
      if (!slots[0] || !slots[1]) return;
      let baseSrc, nextSrc, mix;
      if (!SEQ_ENABLED || SEQ_IMAGES.length === 0) { baseSrc = baseImg; nextSrc = baseImg; mix = 0; } else if (p3D <= 0) { baseSrc = baseImg; nextSrc = SEQ_IMAGES[0]; mix = 0; } else if (p3D >= 1) { const last = SEQ_IMAGES[SEQ_IMAGES.length - 1]; baseSrc = last; nextSrc = last; mix = 0; } else { const totalFrames = SEQ_IMAGES.length - 1; const floatIndex = p3D * totalFrames; const idxBase = Math.floor(floatIndex); const idxNext = Math.min(totalFrames, idxBase + 1); baseSrc = SEQ_IMAGES[idxBase]; nextSrc = SEQ_IMAGES[idxNext]; mix = floatIndex - idxBase; }
      const src0 = slots[0].getAttribute('src'), src1 = slots[1].getAttribute('src');
      let targetSlotBase = 0; if (src1 === baseSrc) targetSlotBase = 1; 
      const targetSlotNext = targetSlotBase === 0 ? 1 : 0; const sBase = slots[targetSlotBase]; if(sBase.getAttribute('src') !== baseSrc) sBase.src = baseSrc; sBase.style.opacity = 1; sBase.style.zIndex = 1; const sNext = slots[targetSlotNext]; if(sNext.getAttribute('src') !== nextSrc) sNext.src = nextSrc; let safeMix = mix; if (safeMix < 0.01) safeMix = 0; sNext.style.opacity = safeMix; sNext.style.zIndex = 2;
  }
  
  function update() {
    if (!track) return;
    const isMobile = window.innerWidth <= 768; const S = isMobile ? MobileS : DesktopS; const E = isMobile ? MobileE : DesktopE; const SEQ = isMobile ? MobileSEQ : DesktopSEQ; const currentBaseRoom = isMobile ? ASSETS.M.room : ASSETS.D.room;
    const rect = track.getBoundingClientRect(); const scrollP = Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
    const pTab = getProgress(scrollP, SEQ.tab[0], SEQ.tab[1]);
    const tScale = lerp(S.tabScale, E.tabScale, pTab), tRotX = lerp(S.tabRotX, E.tabRotX, pTab), tRotY = lerp(S.tabRotY, E.tabRotY, pTab), tRotZ = lerp(S.tabRotZ, E.tabRotZ, pTab), tX = lerp(S.tabX, E.tabX, pTab), tY = lerp(S.tabY, E.tabY, pTab);
    if(back) back.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg)`;
    if(front) front.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg) translateZ(60px)`;
    const rRotX = lerp(S.tabRotX, 0, pTab), rRotY = lerp(S.roomRotY || 0, E.roomRotY || 0, pTab), rRotZ = lerp(S.roomRotZ || 0, E.roomRotZ || 0, pTab), rScale = lerp(S.roomScale, E.roomScale, pTab), rX = lerp(S.roomX, E.roomX, pTab), rY = lerp(S.roomY, E.roomY, pTab), lift = lerp(0, -15, pTab);
    if(roomGroup) roomGroup.style.transform = `scale(${tScale}) rotateZ(${rRotZ}deg) rotateY(${rRotY}deg) rotateX(${rRotX}deg) translateZ(30px)`;
    slots.forEach(img => { if(img) { img.style.top = `${rY}%`; img.style.left = `${rX}%`; img.style.transform = `translate(-50%, ${lift}%) scale(${rScale})`; } });
    
    // THIS LINE WAS THE ISSUE - RESTORED
    const p3D = getProgress(scrollP, SEQ.room3d[0], SEQ.room3d[1]); updateSequence(p3D, currentBaseRoom);
    
    const showBubbles = p3D > 0.1;
    const bubbles = bubbleLayer.querySelectorAll('.hero-bubble-hero-61412');
    bubbles.forEach(b => { if(showBubbles) b.classList.add('visible'); else b.classList.remove('visible'); });

    const pLogo = getProgress(scrollP, SEQ.logo[0], SEQ.logo[1]), lScale = lerp(S.logoScale, E.logoScale, pLogo), lX = lerp(S.logoX, E.logoX, pLogo), lY = lerp(S.logoY, E.logoY, pLogo), lOp = lerp(S.logoOpacity, E.logoOpacity, pLogo);
    if(logo) { logo.style.top = `${lY}%`; logo.style.left = `${lX}%`; logo.style.opacity = lOp; logo.style.transform = `translate(-50%, -100%) scale(${lScale})`; }
    if(gradient) gradient.style.opacity = lOp; 
  }
  window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(() => { update(); ticking = false; }); ticking = true; } }, { passive: true });
  window.addEventListener('resize', update); 
});
</script>

<style>
#fc-section-fc-1726 { 
    position: relative; 
    width: 100vw; 
    left: 50%; 
    margin-left: -50vw; 
    box-sizing: border-box;
    padding-top: 160px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 150px;
    margin-top: -50px; 
    overflow: hidden; 
    font-family: 'Geometria', 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    #fc-section-fc-1726 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-top: 0px !important;
    }
}

#fc-wrap-fc-1726 { position: relative; width: 100%; max-width: 1200px; z-index: 10; }

/* HEADER STYLES */
.fc-header-fc-1726 {
    margin-bottom: 40px;
    text-align: left;
    position: relative;
    z-index: 20;
}
.fc-header-fc-1726 h2 {
    font-size: 44px;
    font-weight: 800;
    color: #e64040;
    margin: 0;
    line-height: 1.1;
}
.fc-header-logo-fc-1726 {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 0px;
    object-fit: contain;
    transform: translateX(80px);
}
@media(max-width: 640px) {
    .fc-header-fc-1726 { text-align: center; } 
    .fc-header-fc-1726 h2 { font-size: 36px; } 
    .fc-header-logo-fc-1726 { transform: translateX(0px); margin-left: auto; margin-right: auto; }
}

/* BUTTON STYLES */
.fc-action-wrapper-fc-1726 {
    margin-top: 40px;
    text-align: center;
    position: relative;
    z-index: 20;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media(min-width: 1280px) {
    .fc-action-wrapper-fc-1726 {
        margin-right: 25% !important;
        max-width: none !important;
    }
}

.fc-action-btn-fc-1726 {
    display: inline-block;
    background: #ED6D32;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 32px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform-style: preserve-3d; 
    perspective: 1000px;
    will-change: transform;
    transition: box-shadow 0.2s ease;
}
.fc-action-btn-fc-1726:hover {
    color: #ffffff !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.2);
}

.fc-btn-reveal { opacity: 0; transform: translateY(20px); }
.fc-in-view .fc-btn-reveal {
    animation: fcHeaderPop-fc-1726 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2000000000000002s; 
}

/* HEADER REVEAL ANIMATION */
@keyframes fcHeaderPop-fc-1726 {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    60% { transform: translateY(-5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-header-reveal { opacity: 0; }
.fc-in-view .fc-header-reveal {
    animation: fcHeaderPop-fc-1726 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fc-header-logo-fc-1726 { animation-delay: 0.1s; }
.fc-header-fc-1726 h2 { animation-delay: 0.2s; }

.fc-bg-gradient-fc-1726 { 
    position: absolute; inset: 0; z-index: 0; 
    background: linear-gradient(-45deg, #325e2d, #00806e, #669999, #678f6d); 
    background-size: 400% 400%; 
    animation: fcGradient-fc-1726 20s ease infinite; 
    opacity: 0.82; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
}

.fc-bg-grain-fc-1726 { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
@keyframes fcGradient-fc-1726 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@keyframes fcPop-fc-1726 {
    0% { opacity: 0; transform: scale(0.5) translateY(50px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fc-card { 
    opacity: 0; 
    transform: translateZ(0); 
    will-change: transform, opacity;
}

.fc-in-view .fc-card { 
    animation: fcPop-fc-1726 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}

.fc-side-image-fc-1726 { opacity: 0; transform: translateY(-50%) scale(0.6) translateX(80px); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.fc-bg-heart-fc-1726 { opacity: 0; transform: translate(-10%, calc(-50% + 0%)) scale(0.8); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }

.fc-in-view .fc-side-image-fc-1726 { opacity: 1; transform: translateY(-50%) scale(0.6) translateX(0); }
.fc-in-view .fc-bg-heart-fc-1726 { opacity: 0.1; transform: translate(-10%, calc(-50% + 0%)) scale(0.5); }
.fc-interactive .fc-side-image-fc-1726 { transition: transform 0.1s ease-out !important; }

.fc-side-image-fc-1726 { display: none; position: absolute; right: -13%; top: 50%; height: 90%; width: auto; object-fit: contain; z-index: 5; pointer-events: none; filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.1)); }
.fc-bg-heart-fc-1726 { display: none; position: absolute; top: 50%; right: 0; width: 600px; height: 600px; z-index: 2; pointer-events: none; } .fc-bg-heart-fc-1726 path { fill: #ffffff; }
@media(min-width: 1280px) { .fc-side-image-fc-1726 { display: block; } .fc-bg-heart-fc-1726 { display: block; } #fc-grid-fc-1726 { margin-right: 25% !important; max-width: none !important; } }
#fc-grid-fc-1726 { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; transition: margin 0.3s; }
@media(min-width: 640px) { #fc-grid-fc-1726 { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 1024px) { #fc-grid-fc-1726 { grid-template-columns: repeat(2, 1fr); } }

.fc-card { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border-radius: 20px; 
    padding: 24px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden; 
    transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; 
    height: 100%;
}
@media(max-width: 480px) { .fc-card { flex-direction: column; align-items: center; text-align: center; } }
.fc-card:hover { box-shadow: 0 25px 50px -12px rgba(214, 68, 59, 0.15); background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.fc-icon-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; isolation: isolate; transform-style: preserve-3d; }
.fc-heart-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .fc-heart-bg path { fill: inherit; } 
.fc-card:hover .fc-heart-bg { transform: scale(1.2) rotate(15deg) translateY(-5px); opacity: 0.5; }
.fc-icon { position: relative; z-index: 20; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; transform: translateZ(0); } 
.fc-card:hover .fc-icon { transform: translateZ(50px) scale(1.1); }
.fc-icon svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.fc-content { flex: 1; z-index: 10; position: relative; transform: translateZ(20px); } .fc-content h3 { font-size: 18px; font-weight: 800; color: #1e293b; margin: 0 0 6px 0; line-height: 1.2; } .fc-content p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }

.fc-icon-img-free { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 20; transform: translateZ(0); }
.fc-card:hover .fc-icon-img-free { transform: translateZ(50px) scale(1.1); transition: transform 0.4s ease; }
.fc-icon-img-free img { width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; }

.fc-card.variant-compact {
    flex-direction: column-reverse; 
    text-align: center;
    justify-content: space-between;
    padding: 12px 20px; 
}
.fc-card.variant-compact .fc-content {
    margin-bottom: 0; 
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}
.fc-card.variant-compact p { display: none; } 

.fc-snake-svg-fc-1726 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.fc-snake-path-fc-1726 { fill: none; stroke: url(#line-grad-fc-1726); stroke-width: 11px; stroke-opacity: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(214,68,59,0.4)); mask: url(#fc-mask-fc-1726); }
</style>
<div id="fc-section-fc-1726">
    <div class="fc-bg-gradient-fc-1726"></div><div class="fc-bg-grain-fc-1726"></div>
    <svg class="fc-bg-heart-fc-1726" viewBox="0 0 79 74" xmlns="http://www.w3.org/2000/svg"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
    <img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/15-1.png" class="fc-side-image-fc-1726" alt="" />
    
    <div id="fc-wrap-fc-1726">
        
                <div class="fc-header-fc-1726">
                    
                    <div class="fc-header-reveal"><h2>MISSION ATTO</h2></div>
                </div>
            
        
        <svg id="fc-svg-fc-1726" class="fc-snake-svg-fc-1726">
            <defs>
                <linearGradient id="line-grad-fc-1726" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#00806e" />
                    <stop offset="50%" stop-color="#325e2d" />
                    <stop offset="100%" stop-color="#669999" />
                </linearGradient>
                <mask id="fc-mask-fc-1726"><rect x="-10000" y="-10000" width="20000" height="20000" fill="white" /><g id="fc-mask-rects-fc-1726"></g></mask>
            </defs>
            <path id="fc-path-fc-1726" class="fc-snake-path-fc-1726" d="" />
        </svg>
        <div id="fc-grid-fc-1726">
                <div class="fc-card " style="animation-delay: 0s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-50px, 0px) scale(3); opacity: 0.15;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="104" height="70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:104px; min-height:70px;"><path d="M9 21h6v-1.5H9V21zm3-19C8.48 2 5.5 4.98 5.5 8.5c0 2.85 1.43 5.5 3.5 6.95V19h6v-3.55c2.07-1.44 3.5-4.1 3.5-6.95C18.5 4.98 15.52 2 12 2z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject</h3><p>Amazon rainforest and ATTO research tower</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.2s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-80px, -10px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="62" height="116" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:62px; min-height:116px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject content</h3><p>Geography, chemistry, natural sciences, ESD</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.4s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="464" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:464px;"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 6v6l4 2" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>5 interactive lessons</h3><p>5 interactive, short research lessons, each lasting 5 minutes.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.6000000000000001s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="98" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:98px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Up to 10 players per group</h3><p>Ideal for small groups – cooperative and quick to get started.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.8s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:80px;"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12z M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Suitable for grades 8 and above</h3><p>Designed to high educational standards for learners from 8th grade onwards.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:128px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2L14 8 20 8 M16 13L8 13 M16 17L8 17 M10 9L8 9" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>High-quality accompanying material</h3><p>Educational instructions, and worksheets included.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1.2000000000000002s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:62px;"><path d="M12 18h.01M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>For tablets and smartphones</h3><p>Compatible with iOS and Android, no additional devices required.</p></div>
                </div>
                <div class="fc-card variant-compact" style="animation-delay: 1.4000000000000001s; padding-top: 20px;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-210px, -30px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon-img-free"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/04/institutionlogo28530.png" style="transform: translate(-10px, -30px) scale(0.12);" alt="Cooperational partner" /></div>
                    </div>
                    <div class="fc-content"><h3>Cooperational partner</h3><p>Produziert von Heartucate GmbH für Max-Planck-Institut für Biogeochemie Jena</p></div>
                </div></div>
        
                <div class="fc-action-wrapper-fc-1726">
                    <a href="" class="fc-action-btn-fc-1726 fc-btn-reveal">Learn more</a>
                </div>
            
    </div>
</div>
<script>(function(){
    const uid = "fc-1726";
    const s = document.getElementById('fc-section-'+uid);
    const img = s.querySelector('.fc-side-image-'+uid);
    const pathEl = document.getElementById('fc-path-'+uid);
    
    function updP(){
        const grid = document.getElementById('fc-grid-'+uid);
        const path = document.getElementById('fc-path-'+uid);
        const maskG = document.getElementById('fc-mask-rects-'+uid);
        if(!grid || !path || !maskG) return;
        
        const cardsEl = Array.from(grid.children);
        if(cardsEl.length < 2) return;
        
        const containerWidth = grid.offsetWidth;
        
        // CORRECTION: Add Grid Top/Left relative to container to items position
        // Because the SVG is absolute to the WRAPPER, not the GRID.
        const gridTop = grid.offsetTop;
        const gridLeft = grid.offsetLeft;

        const items = cardsEl.map(el => {
            const w = el.offsetWidth;
            const h = el.offsetHeight;
            const x = el.offsetLeft + gridLeft;
            const y = el.offsetTop + gridTop;
            return { el, x, y, w, h, cx: x + w/2, cy: y + h/2, yTop: y };
        });

        const isMobile = window.innerWidth < 640;

        const rows = [];
        items.forEach(item => {
            const row = rows.find(r => Math.abs(r[0].yTop - item.yTop) < 20);
            if(row) row.push(item); else rows.push([item]);
        });
        rows.sort((a,b) => a[0].yTop - b[0].yTop);

        let snakeList = [];
        rows.forEach((row, idx) => {
            row.sort((a,b) => a.cx - b.cx); 
            if(idx % 2 !== 0) row.reverse(); 
            snakeList = snakeList.concat(row);
        });

        let d = "";
        let maskHTML = "";
        
        snakeList.forEach((item, i) => {
            maskHTML += `<rect x="${item.x}" y="${item.y}" width="${item.w}" height="${item.h}" rx="20" ry="20" fill="black" />`;
            const currX = item.cx;
            const currY = item.cy;

            if (i === 0) d += `M ${currX} ${currY}`;
            else {
                const prev = snakeList[i - 1];
                const prevX = prev.cx;
                const prevY = prev.cy;
                
                if(isMobile) {
                    const direction = (i % 2 === 0) ? 1 : -1;
                    const amplitude = 60;
                    const cp1X = prevX + (amplitude * direction);
                    const cp1Y = prevY + (currY - prevY) * 0.5;
                    const cp2X = currX + (amplitude * direction);
                    const cp2Y = currY - (currY - prevY) * 0.5;
                    d += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${currX} ${currY}`;
                } else {
                    const isVerticalDrop = Math.abs(currY - prevY) > 50;
                    if (!isVerticalDrop) {
                        const hang = 0;
                        d += ` C ${prevX + (currX-prevX)*0.5} ${prevY + hang}, ${prevX + (currX-prevX)*0.5} ${currY + hang}, ${currX} ${currY}`;
                    } else {
                        const bulge = 60;
                        const dir = (prevX > containerWidth / 2) ? 1 : -1; 
                        d += ` C ${prevX + (bulge * dir)} ${prevY + (currY-prevY)*0.1}, ${currX + (bulge * dir)} ${currY - (currY-prevY)*0.1}, ${currX} ${currY}`;
                    }
                }
            }
        });
        path.setAttribute("d", d);
        maskG.innerHTML = maskHTML;
        
        if(path) {
            const len = path.getTotalLength();
            if(!s.classList.contains('fc-in-view')){
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = len;
            } else {
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = 0;
            }
        }
    }

    const ro = new ResizeObserver(() => updP());
    ro.observe(s);

    const o = new IntersectionObserver((e)=>{ 
        e.forEach(entry => { 
            if(entry.isIntersecting) { 
                s.classList.add('fc-in-view'); 
                const path = document.getElementById('fc-path-'+uid);
                if(path) {
                    const len = path.getTotalLength();
                    path.style.strokeDasharray = len;
                    path.style.strokeDashoffset = len;
                    path.getBoundingClientRect();
                    const duration = 8 * 0.4 + 0.5;
                    path.style.transition = `stroke-dashoffset ${duration}s ease-out`;
                    path.style.strokeDashoffset = '0';
                }
                setTimeout(()=>{s.classList.add('fc-interactive');}, 2000); 
                setTimeout(updP, 100); 
                setTimeout(updP, 1200); 
                o.disconnect(); 
            } 
        }); 
    }, { threshold: 0.1 });
    o.observe(s);
    
    // TILT LOGIC FOR CARDS AND BUTTON
    const tiltElements = document.querySelectorAll('#fc-wrap-'+uid+' .fc-card, #fc-wrap-'+uid+' .fc-action-btn-'+uid);
    tiltElements.forEach(el=>{
        el.addEventListener('animationend', () => {
            el.style.animation = 'none'; 
            el.style.opacity = '1';
            el.style.transform = 'translateZ(0)';
        });

        el.addEventListener('mousemove',(e)=>{
            const rect=el.getBoundingClientRect();
            const x=e.clientX-rect.left; const y=e.clientY-rect.top;
            const centerX=rect.width/2; const centerY=rect.height/2;
            const rotateX=((y-centerY)/centerY)*-5; const rotateY=((x-centerX)/centerX)*5;
            // BUTTON SCALES DIFFERENTLY
            const scale = el.classList.contains('fc-action-btn-'+uid) ? 1.05 : 1.02;
            el.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
        });
        el.addEventListener('mouseleave',()=>{ 
            el.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1) translateZ(0)'; 
        });
    });

    if(img && window.innerWidth > 1024) {
        s.addEventListener('mousemove', (e) => {
            if(!s.classList.contains('fc-interactive')) return;
            const rect = s.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;
            img.style.transform = `translateY(-50%) scale(0.6) perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) translateX(${x * -20}px) translateY(${y * -20}px)`;
        });
        s.addEventListener('mouseleave', () => {
            img.style.transform = `translateY(-50%) scale(0.6)`;
        });
    }
    
    window.addEventListener('load', updP);
    window.addEventListener('resize', updP);
})();</script><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-15 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:left;--awb-margin-top:30px;--awb-margin-right:0px;--awb-max-width:450px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-7 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><img decoding="async" width="1248" height="936" title="attoshow1" src="https://heartucate.eu/wp-content/uploads/2025/12/attoshow1.png" alt class="img-responsive wp-image-57140" srcset="https://heartucate.eu/wp-content/uploads/2025/12/attoshow1-200x150.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow1-400x300.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow1-600x450.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow1-800x600.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow1-1200x900.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow1.png 1248w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-16 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-5 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#285d12;--awb-margin-top:55px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">Explore the heart of the Amazon!</h3></div><div class="fusion-text fusion-text-13 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>MISSION ATTO brings the German-Brazilian research project directly into the classroom. In collaboration with the Max Planck Institute for Biogeochemistry, interactive augmented reality lessons have been developed to supplement traditional print materials. Students in grade 8 and above explore the rainforest, understand its role as a “tipping element” in the global climate system, and learn about the unique biodiversity of the Amazon region.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-17 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-padding-top:55px;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-6 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#285d12;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">Experience science up close!</h3></div><div class="fusion-text fusion-text-14 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>In addition to a 3D ATTO camp that can be explored, the MISSION ATTO app offers interactive units on exciting topics such as “flying rivers” and the carbon cycle. Combined with ten detailed worksheets, young people can slip into the roles of reporters or researchers. The interdisciplinary material (biology, chemistry, physics) promotes active, independent learning and is ideal for project days, substitute lessons, or extracurricular education.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-18 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:right;--awb-margin-top:30px;--awb-max-width:450px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-8 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.3" data-animationOffset="top-into-view"><img decoding="async" width="1248" height="936" title="attoshow2" src="https://heartucate.eu/wp-content/uploads/2025/12/attoshow2.png" alt class="img-responsive wp-image-57147" srcset="https://heartucate.eu/wp-content/uploads/2025/12/attoshow2-200x150.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow2-400x300.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow2-600x450.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow2-800x600.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow2-1200x900.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/attoshow2.png 1248w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><style>
#bento-3778 { position: relative; width: 100vw; left: 50%; margin-left: -50vw; box-sizing: border-box; font-family: 'Geometria', sans-serif; padding: 80px 160px; background: transparent; overflow: hidden; }
@media(max-width: 768px) { #bento-3778 { padding: 40px 15px; } }
#bento-3778::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #0293ba, #22465e, #07a5bb, #0fb9c0); opacity: 0.45; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); }
#bento-3778 .bento-grid { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 20px; max-width: 1200px; margin: 0 auto; grid-auto-rows: 90px; }
@media(max-width: 1200px) { #bento-3778 .bento-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; } }
@media(max-width: 800px) { #bento-3778 .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }
#bento-3778 .bento-item { position: relative; border-radius: 24px; transform-style: preserve-3d; cursor: pointer; transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
#bento-3778 .span-c-1 { grid-column: span 1; } #bento-3778 .span-c-2 { grid-column: span 2; } #bento-3778 .span-c-3 { grid-column: span 3; } #bento-3778 .span-c-4 { grid-column: span 4; } #bento-3778 .span-c-5 { grid-column: span 5; } #bento-3778 .span-c-6 { grid-column: span 6; }
#bento-3778 .span-r-1 { grid-row: span 1; } #bento-3778 .span-r-2 { grid-row: span 2; } #bento-3778 .span-r-3 { grid-row: span 3; } #bento-3778 .span-r-4 { grid-row: span 4; } #bento-3778 .span-r-5 { grid-row: span 5; } #bento-3778 .span-r-6 { grid-row: span 6; }
@media(max-width: 800px) { #bento-3778 .bento-item { grid-column: span 1 !important; grid-row: span 1 !important; } #bento-3778 .bento-item.span-c-3, #bento-3778 .bento-item.span-c-4, #bento-3778 .bento-item.span-c-5, #bento-3778 .bento-item.span-c-6 { grid-column: span 2 !important; grid-row: span 2 !important; } }
#bento-3778 .bento-item.expanded { grid-column: span var(--exp-c, 4) !important; grid-row: span var(--exp-r, 4) !important; z-index: 100; }
@media(max-width: 1200px) { #bento-3778 .bento-item.expanded { grid-column: span min(var(--exp-c, 4), 4) !important; } }
@media(max-width: 800px) { #bento-3778 .bento-item.expanded { grid-column: span 2 !important; grid-row: span 3 !important; } #bento-3778 .bento-item.expanded[data-type="video"] { aspect-ratio: 16/9 !important; height: auto !important; min-height: unset !important; grid-row: span 2 !important; } }
#bento-3778 .bento-grid.has-expanded .bento-item:not(.expanded) { opacity: 0.4; transform: scale(0.96); filter: grayscale(100%); pointer-events: auto; }
#bento-3778 .bento-inner { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease-out; transform: translateZ(0); }
#bento-3778 .bento-item.expanded .bento-inner { transform: none !important; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5); border: 3px solid #4F46E5; }
#bento-3778 .bento-warp-bg { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, #0293ba, #22465e); opacity: 0; z-index: -1; transform: scale(0.8); pointer-events: none; }
@keyframes warpShock-bento-3778 { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.4); } }
#bento-3778 .bento-item.expanded .bento-warp-bg { animation: warpShock-bento-3778 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#bento-3778 .bento-media-wrap { width: 100%; height: 100%; position: relative; }
#bento-3778 img, #bento-3778 video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#bento-3778 .bento-item:not(.expanded):hover img { transform: scale(1.08); }
#bento-3778 .bento-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 40px; text-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; transition: opacity 0.3s; opacity: 0; }
#bento-3778 .bento-item[data-type="video"]:not(.expanded):hover .bento-play-icon { opacity: 1; }
#bento-3778 .bento-item.expanded .bento-play-icon { display: none; }
#bento-3778 .bento-close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border-radius: 50%; color: white; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 101; opacity: 0; pointer-events: none; transform: scale(0.8); transition: all 0.4s ease; }
#bento-3778 .bento-item.expanded .bento-close-btn { opacity: 1; pointer-events: all; transform: scale(1); }
#bento-3778 .bento-close-btn:hover { background: #C63F40; transform: scale(1.1); }
#bento-3778 .bento-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; }
#bento-3778 .bento-item:hover:not(.expanded) .bento-overlay { opacity: 1; transform: translateY(0); }
#bento-3778 .bento-item.expanded .bento-overlay { opacity: 0; }
#bento-3778 h3 { margin: 0; color: white; font-size: 18px; font-weight: 700; }
</style>
<div id="bento-3778"><div class="bento-grid" id="grid-bento-3778">
                <div class="bento-item span-c-2 span-r-6 js-bento-card" data-type="image" style="--exp-c: 4; --exp-r: 12;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/02/Screenshot_20231120_174952_Mission-ATTO-800x1333.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Neu</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-3 js-bento-card" data-type="image" style="--exp-c: 2; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/02/Screenshot_20231120_173651_Mission-ATTO-800x1333.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Neu</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-3 js-bento-card" data-type="image" style="--exp-c: 2; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/02/Screenshot_20231120_180729_Mission-ATTO-800x1333.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Neu</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-3 js-bento-card" data-type="image" style="--exp-c: 2; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/02/Screenshot_20231120_180533_Mission-ATTO.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Neu</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-3 js-bento-card" data-type="image" style="--exp-c: 2; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/02/Screenshot_20231120_180036_Mission-ATTO-800x1333.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Neu</h3></div>
                    </div>
                </div></div></div>
<script>(function(){const grid=document.getElementById('grid-bento-3778'),cards=grid.querySelectorAll('.js-bento-card');cards.forEach(el=>{const vid=el.querySelector('video'),closeBtn=el.querySelector('.bento-close-btn'),inner=el.querySelector('.bento-inner');el.addEventListener('mousemove',(e)=>{if(el.classList.contains('expanded'))return;const r=el.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,cX=r.width/2,cY=r.height/2,rX=((y-cY)/cY)*-4,rY=((x-cX)/cX)*4;inner.style.transform=`perspective(1000px) rotateX(${rX}deg) rotateY(${rY}deg) scale(1.02)`});el.addEventListener('mouseleave',()=>{if(!el.classList.contains('expanded'))inner.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1)'});el.addEventListener('click',(e)=>{if(el.classList.contains('expanded')&&vid)return;if(el.classList.contains('expanded')&&!vid)return;cards.forEach(c=>{const cVid=c.querySelector('video');if(cVid){cVid.muted=true;cVid.loop=true;cVid.removeAttribute('controls');cVid.play()}c.classList.remove('expanded')});grid.classList.add('has-expanded');el.classList.add('expanded');inner.style.transform='';if(vid){vid.currentTime=0;vid.muted=false;vid.loop=false;vid.setAttribute('controls','true');vid.play()}setTimeout(()=>el.scrollIntoView({behavior:'smooth',block:'center'}),400)});if(closeBtn){closeBtn.addEventListener('click',(e)=>{e.stopPropagation();el.classList.remove('expanded');grid.classList.remove('has-expanded');if(vid){vid.muted=true;vid.loop=true;vid.removeAttribute('controls');vid.play()}})}})})();</script><div class="fusion-text fusion-text-15"><h2 style="color: #325e2d;">Credits:</h2>
</div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-19 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-16"><div class="fusion-text fusion-text-5">
<p><strong style="color: #325e2d;">Analog print materials:</strong><br />
Familie Redlich</p>
</div>
<div class="fusion-text fusion-text-6">
<p><strong style="color: #325e2d;">Concept:</strong><br />
Franziska Weser</p>
<p><span style="color: #325e2d;"><b>Technical Lead:</b></span><br />
Vincent Schiller</p>
</div>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-20 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-17"><p><strong style="color: #325e2d;">Technical Support:</strong><br />
Tobias Marr</p>
<p><strong style="color: #325e2d;">3D Art / Modelling:</strong><br />
Lukas Krieg / Vincent Schiller</p>
<p><span style="color: #325e2d;"><b>Scientific advice:</b></span><br />
<span style="background-color: rgba(0, 0, 0, 0);">Iris Wolf</span></p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-21 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-18"><p style="color: #00806e;"><b style="color: #325e2d;">Client:</b></p>
</div><div class="fusion-image-element " style="--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-9 hover-type-none"><img decoding="async" width="800" height="178" title="MPI" src="https://heartucate.eu/wp-content/uploads/2024/03/MPI.jpg" alt class="img-responsive wp-image-55412" srcset="https://heartucate.eu/wp-content/uploads/2024/03/MPI-200x45.jpg 200w, https://heartucate.eu/wp-content/uploads/2024/03/MPI-400x89.jpg 400w, https://heartucate.eu/wp-content/uploads/2024/03/MPI-600x134.jpg 600w, https://heartucate.eu/wp-content/uploads/2024/03/MPI.jpg 800w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px" /></span></div><div class="fusion-image-element " style="--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-10 hover-type-none"><img decoding="async" width="800" height="400" title="ATTO_Logo_Amazon" src="https://heartucate.eu/wp-content/uploads/2024/03/ATTO_Logo_Amazon.jpg" alt class="img-responsive wp-image-55410" srcset="https://heartucate.eu/wp-content/uploads/2024/03/ATTO_Logo_Amazon-200x100.jpg 200w, https://heartucate.eu/wp-content/uploads/2024/03/ATTO_Logo_Amazon-400x200.jpg 400w, https://heartucate.eu/wp-content/uploads/2024/03/ATTO_Logo_Amazon-600x300.jpg 600w, https://heartucate.eu/wp-content/uploads/2024/03/ATTO_Logo_Amazon.jpg 800w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-22 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-19"><p style="color: #00806e;"><b style="color: #325e2d;">Funded by:</b></p>
</div><div class="fusion-image-element " style="--awb-max-width:200px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-11 hover-type-none"><img decoding="async" width="500" height="356" title="BMBF" src="https://heartucate.eu/wp-content/uploads/2024/03/BMBF.jpg" alt class="img-responsive wp-image-55411" srcset="https://heartucate.eu/wp-content/uploads/2024/03/BMBF-200x142.jpg 200w, https://heartucate.eu/wp-content/uploads/2024/03/BMBF-400x285.jpg 400w, https://heartucate.eu/wp-content/uploads/2024/03/BMBF.jpg 500w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div></div></div></div></div>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/mission-atto-3/">MISSION ATTO</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>epic education &#8211; Quelle Internet?!</title>
		<link>https://heartucate.eu/en/cooperations/epic-education-quelle-internet/</link>
		
		<dc:creator><![CDATA[Heartucate-admin]]></dc:creator>
		<pubDate>Mon, 05 Jan 2026 16:31:04 +0000</pubDate>
				<category><![CDATA[Cooperations]]></category>
		<guid isPermaLink="false">https://heartucate.eu/?p=55630</guid>

					<description><![CDATA[<p>Out of the filter bubble: The AR role-playing game against conspiracy myths  Transform your classroom into a digital battlefield of opinions. In this immersive augmented reality experience, you project a shared virtual space onto a floor mat where nothing is as it seems. You slip into fixed roles, but be careful: special optical  [...]</p>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/epic-education-quelle-internet/">epic education &#8211; Quelle Internet?!</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="fusion-fullwidth fullwidth-box fusion-builder-row-4 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;" ><div class="fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="max-width:1248px;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion-flex-column fusion-flex-align-self-flex-start fusion-animated" style="--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;" data-animationType="fadeInUp" data-animationDuration="1.0" data-animationOffset="top-into-view"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column">
<style>
  #hero-track-hero-50672 { 
      position: relative; 
      width: 100vw; 
      left: 50%;
      margin-left: -50vw;
      height: 450vh; 
      z-index: 10; 
  }
  #hero-sticky-viewport-hero-50672 { position: sticky; top: 0; width: 100vw; height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); left: 50%; right: 50%; overflow: hidden; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; perspective: 1200px; opacity: 0; transition: opacity 0.5s ease-in; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
  #hero-sticky-viewport-hero-50672.loaded { opacity: 1; }
  #hero-main-wrapper-hero-50672 { position: relative; z-index: 100; width: 90vw; max-width: 1000px; aspect-ratio: 1.455; transform-style: preserve-3d; will-change: transform; margin: auto; transition: transform 0.1s cubic-bezier(0.2, 0, 0.4, 1); }
  .hero-mask-hero-50672 { position: absolute; top: 6.5%; left: 5.3%; right: 8.4%; bottom: 8.1%; border-radius: 13px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
  .hero-gradient-hero-50672 { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 2; pointer-events: none; }
  .hero-layer-hero-50672 { position: absolute; inset: 0; transform-style: preserve-3d; }
  
  .hero-fixed-blur-layer-hero-50672 {
    position: absolute; 
    inset: 1%; 
    border-radius: 65px;
    transform: translateZ(undefinedpx);
    opacity: 0.75;
    background-image: url('https://heartucate.eu/wp-content/uploads/2025/12/display-texture3png.png'); background-size: cover; background-position: center;
    mask-image: radial-gradient(closest-side, transparent 34%, black 94%); -webkit-mask-image: radial-gradient(closest-side, transparent 34%, black 94%);
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 0; 
  }

  #hero-back-hero-50672 { 
      z-index: 10; 
      transform-style: preserve-3d; 
      transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); 
  }
  
  .hero-frame-img-hero-50672 { transform: translateZ(2px); z-index: 20; }
  
  #hero-room-group-hero-50672 { z-index: 20; pointer-events: none; transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
  .hero-room-img-layer-hero-50672 { position: absolute; width: 80%; height: auto; transform-origin: center center; top: -22%; left: 50%; transform: translate(-50%, 0) scale(0.45); will-change: opacity, transform; backface-visibility: hidden; }
  #hero-front-hero-50672 { z-index: 30; pointer-events: none; transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); }
  
  .hero-bubble-hero-50672 {
    position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: linear-gradient(135deg, #035e738C, #66c0b58C, #0091b98C);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border-radius: 99px; color: white; font-weight: 700; font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1000; pointer-events: none; 
    transform: translate(-50%, -50%) translateZ(150px) scale(0); opacity: 0;
    will-change: transform, opacity;
    white-space: nowrap;
  }
  
  @keyframes heroPop-hero-50672 {
    0% { opacity: 0; transform: translate(-50%, -50%) translateZ(150px) scale(0.5); }
    60% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateZ(150px) scale(1); }
  }

  .hero-bubble-hero-50672.visible { 
      animation: heroPop-hero-50672 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
  }
  
  .hero-bubble-hero-50672:nth-of-type(1) { animation-delay: 0.1s; }
  .hero-bubble-hero-50672:nth-of-type(2) { animation-delay: 0.2s; }
  .hero-bubble-hero-50672:nth-of-type(3) { animation-delay: 0.3s; }
  .hero-bubble-hero-50672:nth-of-type(4) { animation-delay: 0.4s; }
  .hero-bubble-hero-50672:nth-of-type(5) { animation-delay: 0.5s; }
  .hero-bubble-hero-50672:nth-of-type(6) { animation-delay: 0.6s; }

  .hero-bubble-icon-hero-50672 { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: white; }

  @keyframes spinIn-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg); opacity: 1; } }
  @keyframes spinInFront-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.7) rotateZ(0deg) rotateY(11deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
  @keyframes spinInRoom-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.7) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }

  @media (max-width: 768px) {
      .hero-bubble-hero-50672 { display: none !important; }
      #hero-track-hero-50672 { height: 450vh; }
      #hero-sticky-viewport-hero-50672 { perspective: 1200px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
      #hero-main-wrapper-hero-50672 { width: 95vw; max-width: none; aspect-ratio: 0.54; }
      .hero-mask-hero-50672 { top: 10%; left: 7.2%; right: 7.2%; bottom: 4.6%; border-radius: 43px; }
      .hero-gradient-hero-50672 { height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
      
      .hero-fixed-blur-layer-hero-50672 { 
          
         opacity: undefined;
         transform: translateZ(undefinedpx);
         border-radius: undefinedpx;
         
      }

      #hero-back-hero-50672 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); }
      #hero-room-group-hero-50672 { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); }
      .hero-room-img-layer-hero-50672 { top: 25%; left: 50%; transform: translate(-50%, 0) scale(0.95); }
      #hero-front-hero-50672 { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); }
      @keyframes spinIn-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg); opacity: 1; } }
      @keyframes spinInFront-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(60px); opacity: 0; } 100% { transform: translate(0%, 0%) scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(60px); opacity: 1; } }
      @keyframes spinInRoom-hero-50672 { 0% { transform: scale(0.5) rotateY(-90deg) translateZ(30px); opacity: 0; } 100% { transform: scale(0.9) rotateZ(0deg) rotateY(0deg) rotateX(0deg) translateZ(30px); opacity: 1; } }
  }
  .animate-entry-hero-50672 { animation: spinIn-hero-50672 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-room-hero-50672 { animation: spinInRoom-hero-50672 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  #hero-front-hero-50672.animate-entry-hero-50672 { animation: spinInFront-hero-50672 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
</style>
<div id="hero-track-hero-50672">
  <div id="hero-sticky-viewport-hero-50672">
    <div style="position: absolute; inset: 0; z-index: 1;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/3-Cleaner_Raum.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div style="position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0.8;"><picture style="width: 100%; height: 100%; display: block;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/Redglow-1.png" style="width: 100%; height: 100%; object-fit: cover;" alt="" /></picture></div>
    <div id="hero-main-wrapper-hero-50672">
      <div id="hero-back-hero-50672" class="hero-layer-hero-50672 animate-entry-hero-50672">
        <div class="hero-fixed-blur-layer-hero-50672"></div>
        <picture class="hero-frame-img-hero-50672" style="position: absolute; inset: 0; width: 100%; height: 100%;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/iphone-mockup.png"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/11/2-tablet.png" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;" alt="" /></picture>
        <div class="hero-mask-hero-50672"></div>
      </div>
      <div id="hero-room-group-hero-50672" class="hero-layer-hero-50672 animate-room-hero-50672"><img id="hero-room-slot0-hero-50672" class="hero-room-img-layer-hero-50672" decoding="sync" src="https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/50.png" style="z-index: 1;" alt="" /><img id="hero-room-slot1-hero-50672" class="hero-room-img-layer-hero-50672" decoding="sync" src="https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/50.png" style="z-index: 1; opacity: 0;" alt="" /></div>
      <div id="hero-front-hero-50672" class="hero-layer-hero-50672 animate-entry-hero-50672"><div class="hero-mask-hero-50672"><div id="hero-gradient-el-hero-50672" class="hero-gradient-hero-50672"></div><picture style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"><source media="(max-width: 768px)" srcset="https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2.png"><img decoding="async" id="hero-logo-img-hero-50672" src="https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2.png" style="position: absolute; width: 40%; height: auto; z-index: 10; transform-origin: center bottom; top: 91%; left: 50%; transform: translate(-50%, -100%) scale(0.9); opacity: 1;" alt="" /></picture></div></div>
      <div id="hero-bubbles-layer-hero-50672" class="hero-layer-hero-50672" style="z-index: 100; pointer-events: none;"></div>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const track = document.getElementById('hero-track-hero-50672'), viewport = document.getElementById('hero-sticky-viewport-hero-50672'), wrapper = document.getElementById('hero-main-wrapper-hero-50672');
  const back = document.getElementById('hero-back-hero-50672'), front = document.getElementById('hero-front-hero-50672'), roomGroup = document.getElementById('hero-room-group-hero-50672');
  const bubbleLayer = document.getElementById('hero-bubbles-layer-hero-50672');
  const slots = [document.getElementById('hero-room-slot0-hero-50672'), document.getElementById('hero-room-slot1-hero-50672')], logo = document.getElementById('hero-logo-img-hero-50672'), gradient = document.getElementById('hero-gradient-el-hero-50672');
  const PARALLAX_MAX = 10;
  if(PARALLAX_MAX > 0 && window.matchMedia("(hover: hover)").matches && wrapper) { document.addEventListener('mousemove', (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 2; const y = (e.clientY / window.innerHeight - 0.5) * 2; wrapper.style.transform = `rotateY(${x * PARALLAX_MAX}deg) rotateX(${-y * PARALLAX_MAX}deg)`; }); }
  
  const SEQ_ENABLED = true;
  const SEQ_IMAGES = ["https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/50.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/51.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/52.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/53.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/54.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/55.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/56.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/57.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/58.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/58.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/59.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/60.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/61.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/62.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/63.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/64.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/65.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/66.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/67.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/68.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/69.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/70.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/71.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/72.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/73.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/74.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/75.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/76.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/77.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/78.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/79.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/80.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/81.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/82.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/83.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/84.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/85.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/86.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/87.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/88.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/89.png","https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/90.png"];
  const ASSETS = { D: { room: "https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/50.png" }, M: { room: "https://heartucate.eu/content/projects/quelle-internet/hero-section/1024x1024/50.png" } };
  
  const BUBBLES = [{"side":"left","y":30,"x":16,"id":1,"scale":1.2,"text":"Interactive workshop component","icon":"clock","visible":true},{"id":2,"side":"left","icon":"target","x":0,"visible":true,"scale":1,"text":"Age 13+","y":50},{"icon":"pdf","scale":1,"id":3,"visible":true,"y":70,"text":"Role-playing materials","x":11,"side":"left"},{"y":35,"text":"Up to 4 players per group","side":"right","visible":true,"scale":1.2,"id":4,"icon":"users","x":80},{"text":"For Tablets and Smartphones","y":55,"icon":"tablet","x":86,"side":"right","visible":true,"scale":1,"id":5},{"y":75,"scale":1,"x":72,"text":"Augmented Reality Room","side":"right","id":6,"visible":true,"icon":"vr"}];
  const ICONS = {"clock":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg>","users":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>","pdf":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line><polyline points=\"10 9 9 9 8 9\"></polyline></svg>","tablet":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg>","target":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><circle cx=\"12\" cy=\"12\" r=\"6\"></circle><circle cx=\"12\" cy=\"12\" r=\"2\"></circle></svg>","vr":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"></polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"></line></svg>"};
  
  if(window.innerWidth > 768 && BUBBLES.length > 0) {
      BUBBLES.forEach(b => {
          if(!b.visible) return;
          const el = document.createElement('div');
          el.className = 'hero-bubble-hero-50672';
          el.style.left = b.x + '%'; el.style.top = b.y + '%'; el.style.transform = `translate(-50%, -50%) translateZ(150px) scale(${b.scale})`;
          el.innerHTML = `<div class="hero-bubble-icon-hero-50672">${ICONS[b.icon]}</div><span>${b.text}</span>`;
          bubbleLayer.appendChild(el);
      });
  }

  if(SEQ_ENABLED && SEQ_IMAGES.length > 0) SEQ_IMAGES.forEach(src => { const img = new Image(); img.src = src; if('decode' in img) img.decode().catch(()=>{}); });
  if(viewport) viewport.classList.add('loaded');
  const unlockElements = [back, front, roomGroup];
  function unlockAnimation() { unlockElements.forEach(el => { if(el) { el.style.animation = 'none'; el.classList.remove('animate-entry-hero-50672'); el.classList.remove('animate-room-hero-50672'); } }); update(); }
  if(back) { back.addEventListener('animationend', unlockAnimation, { once: true }); setTimeout(unlockAnimation, 1600); } else { update(); }
  const DesktopS = {"tabY":0,"roomRotZ":0,"roomX":50,"tabRotX":0,"logoX":50,"roomY":-22,"logoOpacity":1,"logoY":91,"tabX":0,"tabRotZ":0,"tabRotY":11,"roomRotY":0,"roomScale":0.45,"logoScale":0.9,"tabScale":0.7}, DesktopE = {"logoY":150,"roomRotY":0,"logoScale":0.8,"tabRotY":48,"roomY":0,"tabY":0,"roomRotZ":0,"logoX":50,"tabScale":0.7,"roomScale":0.8,"tabRotX":40,"logoOpacity":0,"roomX":46,"tabRotZ":-27,"tabX":0}, DesktopSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  const MobileS = {"tabX":0,"tabY":0,"tabRotX":0,"roomX":50,"logoX":50,"tabRotZ":0,"roomRotY":0,"logoOpacity":1,"tabScale":0.9,"roomRotZ":0,"roomY":25,"roomScale":0.95,"logoScale":1.5,"logoY":78,"tabRotY":0}, MobileE = {"roomScale":0.25,"roomRotY":0,"tabScale":5,"logoX":50,"tabRotZ":-27,"tabRotX":40,"logoScale":0.8,"tabY":0,"tabRotY":48,"logoOpacity":0,"logoY":150,"tabX":0,"roomRotZ":0,"roomX":50,"roomY":34}, MobileSEQ = { logo: [0, 0.35], tab: [0.2, 0.6], room3d: [0.6, 1] };
  let ticking = false;
  function getProgress(globalP, startP, endP) { if (globalP <= startP) return 0; if (globalP >= endP) return 1; return (globalP - startP) / (endP - startP); }
  function lerp(start, end, t) { return start * (1 - t) + end * t; }
  
  function updateSequence(p3D, baseImg) {
      if (!slots[0] || !slots[1]) return;
      let baseSrc, nextSrc, mix;
      if (!SEQ_ENABLED || SEQ_IMAGES.length === 0) { baseSrc = baseImg; nextSrc = baseImg; mix = 0; } else if (p3D <= 0) { baseSrc = baseImg; nextSrc = SEQ_IMAGES[0]; mix = 0; } else if (p3D >= 1) { const last = SEQ_IMAGES[SEQ_IMAGES.length - 1]; baseSrc = last; nextSrc = last; mix = 0; } else { const totalFrames = SEQ_IMAGES.length - 1; const floatIndex = p3D * totalFrames; const idxBase = Math.floor(floatIndex); const idxNext = Math.min(totalFrames, idxBase + 1); baseSrc = SEQ_IMAGES[idxBase]; nextSrc = SEQ_IMAGES[idxNext]; mix = floatIndex - idxBase; }
      const src0 = slots[0].getAttribute('src'), src1 = slots[1].getAttribute('src');
      let targetSlotBase = 0; if (src1 === baseSrc) targetSlotBase = 1; 
      const targetSlotNext = targetSlotBase === 0 ? 1 : 0; const sBase = slots[targetSlotBase]; if(sBase.getAttribute('src') !== baseSrc) sBase.src = baseSrc; sBase.style.opacity = 1; sBase.style.zIndex = 1; const sNext = slots[targetSlotNext]; if(sNext.getAttribute('src') !== nextSrc) sNext.src = nextSrc; let safeMix = mix; if (safeMix < 0.01) safeMix = 0; sNext.style.opacity = safeMix; sNext.style.zIndex = 2;
  }
  
  function update() {
    if (!track) return;
    const isMobile = window.innerWidth <= 768; const S = isMobile ? MobileS : DesktopS; const E = isMobile ? MobileE : DesktopE; const SEQ = isMobile ? MobileSEQ : DesktopSEQ; const currentBaseRoom = isMobile ? ASSETS.M.room : ASSETS.D.room;
    const rect = track.getBoundingClientRect(); const scrollP = Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
    const pTab = getProgress(scrollP, SEQ.tab[0], SEQ.tab[1]);
    const tScale = lerp(S.tabScale, E.tabScale, pTab), tRotX = lerp(S.tabRotX, E.tabRotX, pTab), tRotY = lerp(S.tabRotY, E.tabRotY, pTab), tRotZ = lerp(S.tabRotZ, E.tabRotZ, pTab), tX = lerp(S.tabX, E.tabX, pTab), tY = lerp(S.tabY, E.tabY, pTab);
    if(back) back.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg)`;
    if(front) front.style.transform = `translate(${tX}%, ${tY}%) scale(${tScale}) rotateZ(${tRotZ}deg) rotateY(${tRotY}deg) rotateX(${tRotX}deg) translateZ(60px)`;
    const rRotX = lerp(S.tabRotX, 0, pTab), rRotY = lerp(S.roomRotY || 0, E.roomRotY || 0, pTab), rRotZ = lerp(S.roomRotZ || 0, E.roomRotZ || 0, pTab), rScale = lerp(S.roomScale, E.roomScale, pTab), rX = lerp(S.roomX, E.roomX, pTab), rY = lerp(S.roomY, E.roomY, pTab), lift = lerp(0, -15, pTab);
    if(roomGroup) roomGroup.style.transform = `scale(${tScale}) rotateZ(${rRotZ}deg) rotateY(${rRotY}deg) rotateX(${rRotX}deg) translateZ(30px)`;
    slots.forEach(img => { if(img) { img.style.top = `${rY}%`; img.style.left = `${rX}%`; img.style.transform = `translate(-50%, ${lift}%) scale(${rScale})`; } });
    
    // THIS LINE WAS THE ISSUE - RESTORED
    const p3D = getProgress(scrollP, SEQ.room3d[0], SEQ.room3d[1]); updateSequence(p3D, currentBaseRoom);
    
    const showBubbles = p3D > 0.1;
    const bubbles = bubbleLayer.querySelectorAll('.hero-bubble-hero-50672');
    bubbles.forEach(b => { if(showBubbles) b.classList.add('visible'); else b.classList.remove('visible'); });

    const pLogo = getProgress(scrollP, SEQ.logo[0], SEQ.logo[1]), lScale = lerp(S.logoScale, E.logoScale, pLogo), lX = lerp(S.logoX, E.logoX, pLogo), lY = lerp(S.logoY, E.logoY, pLogo), lOp = lerp(S.logoOpacity, E.logoOpacity, pLogo);
    if(logo) { logo.style.top = `${lY}%`; logo.style.left = `${lX}%`; logo.style.opacity = lOp; logo.style.transform = `translate(-50%, -100%) scale(${lScale})`; }
    if(gradient) gradient.style.opacity = lOp; 
  }
  window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(() => { update(); ticking = false; }); ticking = true; } }, { passive: true });
  window.addEventListener('resize', update); 
});
</script>

<style>
#fc-section-fc-7113 { 
    position: relative; 
    width: 100vw; 
    left: 50%; 
    margin-left: -50vw; 
    box-sizing: border-box;
    padding-top: 160px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 150px;
    margin-top: -50px; 
    overflow: hidden; 
    font-family: 'Geometria', 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    #fc-section-fc-7113 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-top: 0px !important;
    }
}

#fc-wrap-fc-7113 { position: relative; width: 100%; max-width: 1200px; z-index: 10; }

/* HEADER STYLES */
.fc-header-fc-7113 {
    margin-bottom: 60px;
    text-align: left;
    position: relative;
    z-index: 20;
}
.fc-header-fc-7113 h2 {
    font-size: 42px;
    font-weight: 800;
    color: #002c50;
    margin: 0;
    line-height: 1.1;
}
.fc-header-logo-fc-7113 {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 0px;
    object-fit: contain;
    transform: translateX(115px);
}
@media(max-width: 640px) {
    .fc-header-fc-7113 { text-align: center; } 
    .fc-header-fc-7113 h2 { font-size: 36px; } 
    .fc-header-logo-fc-7113 { transform: translateX(0px); margin-left: auto; margin-right: auto; }
}

/* BUTTON STYLES */
.fc-action-wrapper-fc-7113 {
    margin-top: 40px;
    text-align: center;
    position: relative;
    z-index: 20;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media(min-width: 1280px) {
    .fc-action-wrapper-fc-7113 {
        margin-right: 25% !important;
        max-width: none !important;
    }
}

.fc-action-btn-fc-7113 {
    display: inline-block;
    background: #ED6D32;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 32px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transform-style: preserve-3d; 
    perspective: 1000px;
    will-change: transform;
    transition: box-shadow 0.2s ease;
}
.fc-action-btn-fc-7113:hover {
    color: #ffffff !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.2);
}

.fc-btn-reveal { opacity: 0; transform: translateY(20px); }
.fc-in-view .fc-btn-reveal {
    animation: fcHeaderPop-fc-7113 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2000000000000002s; 
}

/* HEADER REVEAL ANIMATION */
@keyframes fcHeaderPop-fc-7113 {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    60% { transform: translateY(-5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-header-reveal { opacity: 0; }
.fc-in-view .fc-header-reveal {
    animation: fcHeaderPop-fc-7113 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fc-header-logo-fc-7113 { animation-delay: 0.1s; }
.fc-header-fc-7113 h2 { animation-delay: 0.2s; }

.fc-bg-gradient-fc-7113 { 
    position: absolute; inset: 0; z-index: 0; 
    background: linear-gradient(-45deg, #035e73, #66c0b5, #035e73, #b8d048); 
    background-size: 400% 400%; 
    animation: fcGradient-fc-7113 20s ease infinite; 
    opacity: 0.82; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
}

.fc-bg-grain-fc-7113 { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }
@keyframes fcGradient-fc-7113 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@keyframes fcPop-fc-7113 {
    0% { opacity: 0; transform: scale(0.5) translateY(50px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fc-card { 
    opacity: 0; 
    transform: translateZ(0); 
    will-change: transform, opacity;
}

.fc-in-view .fc-card { 
    animation: fcPop-fc-7113 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}

.fc-side-image-fc-7113 { opacity: 0; transform: translateY(-50%) scale(0.6) translateX(80px); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.fc-bg-heart-fc-7113 { opacity: 0; transform: translate(-10%, calc(-50% + 0%)) scale(0.8); transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }

.fc-in-view .fc-side-image-fc-7113 { opacity: 1; transform: translateY(-50%) scale(0.6) translateX(0); }
.fc-in-view .fc-bg-heart-fc-7113 { opacity: 0.1; transform: translate(-10%, calc(-50% + 0%)) scale(0.5); }
.fc-interactive .fc-side-image-fc-7113 { transition: transform 0.1s ease-out !important; }

.fc-side-image-fc-7113 { display: none; position: absolute; right: -6%; top: 50%; height: 90%; width: auto; object-fit: contain; z-index: 5; pointer-events: none; filter: drop-shadow(-20px 0 30px rgba(0,0,0,0.1)); }
.fc-bg-heart-fc-7113 { display: none; position: absolute; top: 50%; right: 0; width: 600px; height: 600px; z-index: 2; pointer-events: none; } .fc-bg-heart-fc-7113 path { fill: #ffffff; }
@media(min-width: 1280px) { .fc-side-image-fc-7113 { display: block; } .fc-bg-heart-fc-7113 { display: block; } #fc-grid-fc-7113 { margin-right: 25% !important; max-width: none !important; } }
#fc-grid-fc-7113 { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; transition: margin 0.3s; }
@media(min-width: 640px) { #fc-grid-fc-7113 { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 1024px) { #fc-grid-fc-7113 { grid-template-columns: repeat(2, 1fr); } }

.fc-card { 
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border-radius: 20px; 
    padding: 24px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.6); 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden; 
    transform-style: preserve-3d; perspective: 1000px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; 
    height: 100%;
}
@media(max-width: 480px) { .fc-card { flex-direction: column; align-items: center; text-align: center; } }
.fc-card:hover { box-shadow: 0 25px 50px -12px rgba(214, 68, 59, 0.15); background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.9); }
.fc-icon-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; isolation: isolate; transform-style: preserve-3d; }
.fc-heart-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .fc-heart-bg path { fill: inherit; } 
.fc-card:hover .fc-heart-bg { transform: scale(1.2) rotate(15deg) translateY(-5px); opacity: 0.5; }
.fc-icon { position: relative; z-index: 20; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; transform: translateZ(0); } 
.fc-card:hover .fc-icon { transform: translateZ(50px) scale(1.1); }
.fc-icon svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.fc-content { flex: 1; z-index: 10; position: relative; transform: translateZ(20px); } .fc-content h3 { font-size: 18px; font-weight: 800; color: #1e293b; margin: 0 0 6px 0; line-height: 1.2; } .fc-content p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }

.fc-icon-img-free { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 20; transform: translateZ(0); }
.fc-card:hover .fc-icon-img-free { transform: translateZ(50px) scale(1.1); transition: transform 0.4s ease; }
.fc-icon-img-free img { width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; }

.fc-card.variant-compact {
    flex-direction: column-reverse; 
    text-align: center;
    justify-content: space-between;
    padding: 12px 20px; 
}
.fc-card.variant-compact .fc-content {
    margin-bottom: 0; 
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}
.fc-card.variant-compact p { display: none; } 

.fc-snake-svg-fc-7113 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.fc-snake-path-fc-7113 { fill: none; stroke: url(#line-grad-fc-7113); stroke-width: 11px; stroke-opacity: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(214,68,59,0.4)); mask: url(#fc-mask-fc-7113); }
</style>
<div id="fc-section-fc-7113">
    <div class="fc-bg-gradient-fc-7113"></div><div class="fc-bg-grain-fc-7113"></div>
    <svg class="fc-bg-heart-fc-7113" viewBox="0 0 79 74" xmlns="http://www.w3.org/2000/svg"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
    <img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/Ghost.png" class="fc-side-image-fc-7113" alt="" />
    
    <div id="fc-wrap-fc-7113">
        
                <div class="fc-header-fc-7113">
                    
                    <div class="fc-header-reveal"><h2>Quelle Internet?!</h2></div>
                </div>
            
        
        <svg id="fc-svg-fc-7113" class="fc-snake-svg-fc-7113">
            <defs>
                <linearGradient id="line-grad-fc-7113" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#66c0b5" />
                    <stop offset="50%" stop-color="#035e73" />
                    <stop offset="100%" stop-color="#035e73" />
                </linearGradient>
                <mask id="fc-mask-fc-7113"><rect x="-10000" y="-10000" width="20000" height="20000" fill="white" /><g id="fc-mask-rects-fc-7113"></g></mask>
            </defs>
            <path id="fc-path-fc-7113" class="fc-snake-path-fc-7113" d="" />
        </svg>
        <div id="fc-grid-fc-7113">
                <div class="fc-card " style="animation-delay: 0s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-70px, -8px) scale(3.2); opacity: 0.15;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="82" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:70px; min-height:82px;"><path d="M9 21h6v-1.5H9V21zm3-19C8.48 2 5.5 4.98 5.5 8.5c0 2.85 1.43 5.5 3.5 6.95V19h6v-3.55c2.07-1.44 3.5-4.1 3.5-6.95C18.5 4.98 15.52 2 12 2z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject</h3><p>Conspiracy theories and how they arise</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.2s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-70px, -8px) scale(3.2); opacity: 0.15;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:58px; min-height:58px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Subject Content</h3><p>Social studies, ethics, politics</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.4s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="98" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:98px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Up to 4 players</h3><p>Ideal for small groups – cooperative & quick to get started.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.6000000000000001s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="464" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:464px;"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 6v6l4 2" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Interactive workshop section</h3><p>Playful and experience-oriented workshop section.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 0.8s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #D6443B; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #D6443B;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:80px;"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12z M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>Suitable for grades 7 and above</h3><p>Designed to high educational standards for learners from 7th grade onwards.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #AF385D;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="128" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:128px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2L14 8 20 8 M16 13L8 13 M16 17L8 17 M10 9L8 9" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>High-quality accompanying material</h3><p>Educational presentation, instructions, and worksheets included.</p></div>
                </div>
                <div class="fc-card " style="animation-delay: 1.2000000000000002s;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #ED6D32; transform: translate(-75px, 0px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon" style="color: #ED6D32;"><svg xmlns="http://www.w3.org/2000/svg" width="56" height="62" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision" style="min-width:56px; min-height:62px;"><path d="M12 18h.01M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01" vector-effect="non-scaling-stroke" /></svg></div>
                    </div>
                    <div class="fc-content"><h3>For tablets and smartphones</h3><p>Compatible with iOS, no additional devices required.</p></div>
                </div>
                <div class="fc-card variant-compact" style="animation-delay: 1.4000000000000001s; padding-top: 20px;">
                    <div class="fc-icon-wrap">
                        <svg class="fc-heart-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 74" style="fill: #AF385D; transform: translate(-230px, -30px) scale(3.2); opacity: 0.1;"><path d="M20.9297 41.6101L39.0897 12.8701L57.2497 41.6101H20.9297Z"/><path d="M20.9004 42.46H57.2904L39.0904 73.98L20.9004 42.46Z"/><path d="M39.9805 12.6802C43.9005 13.5102 58.9805 16.8302 67.7205 18.7702L57.9505 41.1302L39.9805 12.6802Z"/><path d="M40.0098 11.84L53.6398 0L67.2798 17.81L40.0098 11.84Z"/><path d="M55.0195 0.399902L74.9095 8.7799L68.3095 17.7599L55.0195 0.399902Z"/><path d="M68.8496 18.4702L75.2896 9.7002L78.1896 31.2702L68.8496 18.4702Z"/><path d="M68.4096 19.3198L78.1796 32.6998L58.8496 41.2098L68.4096 19.3198Z"/><path d="M58.5 42.2899L77.52 33.9199L61.08 55.9499L58.5 42.2899Z"/><path d="M57.8199 43.2402L60.3799 56.8102L40.6299 73.0202L57.8199 43.2402Z"/><path d="M10.46 18.7702C19.2 16.8302 34.28 13.5102 38.2 12.6802L20.23 41.1302L10.46 18.7702Z"/><path d="M24.5402 0L38.1702 11.84L10.9102 17.81L24.5402 0Z"/><path d="M3.28027 8.7799L23.1703 0.399902L9.87027 17.7599L3.28027 8.7799Z"/><path d="M2.9 9.7002L9.34 18.4702L0 31.2702L2.9 9.7002Z"/><path d="M0.00976562 32.6998L9.76977 19.3198L19.3398 41.2098L0.00976562 32.6998Z"/><path d="M0.660156 33.9199L19.6802 42.2899L17.1002 55.9499L0.660156 33.9199Z"/><path d="M17.7998 56.8102L20.3698 43.2402L37.5598 73.0202L17.7998 56.8102Z"/></svg>
                        <div class="fc-icon-img-free"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/03_Logo_epic-education_vertikal-1.png" style="transform: translate(0px, -15px) scale(0.2);" alt="Cooperational partner" /></div>
                    </div>
                    <div class="fc-content"><h3>Cooperational partner</h3><p>epic education gGmbH</p></div>
                </div></div>
        
                <div class="fc-action-wrapper-fc-7113">
                    <a href="https://www.epic-education.de/quelle-internet/" class="fc-action-btn-fc-7113 fc-btn-reveal">Learn more</a>
                </div>
            
    </div>
</div>
<script>(function(){
    const uid = "fc-7113";
    const s = document.getElementById('fc-section-'+uid);
    const img = s.querySelector('.fc-side-image-'+uid);
    const pathEl = document.getElementById('fc-path-'+uid);
    
    function updP(){
        const grid = document.getElementById('fc-grid-'+uid);
        const path = document.getElementById('fc-path-'+uid);
        const maskG = document.getElementById('fc-mask-rects-'+uid);
        if(!grid || !path || !maskG) return;
        
        const cardsEl = Array.from(grid.children);
        if(cardsEl.length < 2) return;
        
        const containerWidth = grid.offsetWidth;
        
        // CORRECTION: Add Grid Top/Left relative to container to items position
        // Because the SVG is absolute to the WRAPPER, not the GRID.
        const gridTop = grid.offsetTop;
        const gridLeft = grid.offsetLeft;

        const items = cardsEl.map(el => {
            const w = el.offsetWidth;
            const h = el.offsetHeight;
            const x = el.offsetLeft + gridLeft;
            const y = el.offsetTop + gridTop;
            return { el, x, y, w, h, cx: x + w/2, cy: y + h/2, yTop: y };
        });

        const isMobile = window.innerWidth < 640;

        const rows = [];
        items.forEach(item => {
            const row = rows.find(r => Math.abs(r[0].yTop - item.yTop) < 20);
            if(row) row.push(item); else rows.push([item]);
        });
        rows.sort((a,b) => a[0].yTop - b[0].yTop);

        let snakeList = [];
        rows.forEach((row, idx) => {
            row.sort((a,b) => a.cx - b.cx); 
            if(idx % 2 !== 0) row.reverse(); 
            snakeList = snakeList.concat(row);
        });

        let d = "";
        let maskHTML = "";
        
        snakeList.forEach((item, i) => {
            maskHTML += `<rect x="${item.x}" y="${item.y}" width="${item.w}" height="${item.h}" rx="20" ry="20" fill="black" />`;
            const currX = item.cx;
            const currY = item.cy;

            if (i === 0) d += `M ${currX} ${currY}`;
            else {
                const prev = snakeList[i - 1];
                const prevX = prev.cx;
                const prevY = prev.cy;
                
                if(isMobile) {
                    const direction = (i % 2 === 0) ? 1 : -1;
                    const amplitude = 60;
                    const cp1X = prevX + (amplitude * direction);
                    const cp1Y = prevY + (currY - prevY) * 0.5;
                    const cp2X = currX + (amplitude * direction);
                    const cp2Y = currY - (currY - prevY) * 0.5;
                    d += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${currX} ${currY}`;
                } else {
                    const isVerticalDrop = Math.abs(currY - prevY) > 50;
                    if (!isVerticalDrop) {
                        const hang = 0;
                        d += ` C ${prevX + (currX-prevX)*0.5} ${prevY + hang}, ${prevX + (currX-prevX)*0.5} ${currY + hang}, ${currX} ${currY}`;
                    } else {
                        const bulge = 60;
                        const dir = (prevX > containerWidth / 2) ? 1 : -1; 
                        d += ` C ${prevX + (bulge * dir)} ${prevY + (currY-prevY)*0.1}, ${currX + (bulge * dir)} ${currY - (currY-prevY)*0.1}, ${currX} ${currY}`;
                    }
                }
            }
        });
        path.setAttribute("d", d);
        maskG.innerHTML = maskHTML;
        
        if(path) {
            const len = path.getTotalLength();
            if(!s.classList.contains('fc-in-view')){
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = len;
            } else {
                path.style.strokeDasharray = len;
                path.style.strokeDashoffset = 0;
            }
        }
    }

    const ro = new ResizeObserver(() => updP());
    ro.observe(s);

    const o = new IntersectionObserver((e)=>{ 
        e.forEach(entry => { 
            if(entry.isIntersecting) { 
                s.classList.add('fc-in-view'); 
                const path = document.getElementById('fc-path-'+uid);
                if(path) {
                    const len = path.getTotalLength();
                    path.style.strokeDasharray = len;
                    path.style.strokeDashoffset = len;
                    path.getBoundingClientRect();
                    const duration = 8 * 0.4 + 0.5;
                    path.style.transition = `stroke-dashoffset ${duration}s ease-out`;
                    path.style.strokeDashoffset = '0';
                }
                setTimeout(()=>{s.classList.add('fc-interactive');}, 2000); 
                setTimeout(updP, 100); 
                setTimeout(updP, 1200); 
                o.disconnect(); 
            } 
        }); 
    }, { threshold: 0.1 });
    o.observe(s);
    
    // TILT LOGIC FOR CARDS AND BUTTON
    const tiltElements = document.querySelectorAll('#fc-wrap-'+uid+' .fc-card, #fc-wrap-'+uid+' .fc-action-btn-'+uid);
    tiltElements.forEach(el=>{
        el.addEventListener('animationend', () => {
            el.style.animation = 'none'; 
            el.style.opacity = '1';
            el.style.transform = 'translateZ(0)';
        });

        el.addEventListener('mousemove',(e)=>{
            const rect=el.getBoundingClientRect();
            const x=e.clientX-rect.left; const y=e.clientY-rect.top;
            const centerX=rect.width/2; const centerY=rect.height/2;
            const rotateX=((y-centerY)/centerY)*-5; const rotateY=((x-centerX)/centerX)*5;
            // BUTTON SCALES DIFFERENTLY
            const scale = el.classList.contains('fc-action-btn-'+uid) ? 1.05 : 1.02;
            el.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
        });
        el.addEventListener('mouseleave',()=>{ 
            el.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1) translateZ(0)'; 
        });
    });

    if(img && window.innerWidth > 1024) {
        s.addEventListener('mousemove', (e) => {
            if(!s.classList.contains('fc-interactive')) return;
            const rect = s.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;
            img.style.transform = `translateY(-50%) scale(0.6) perspective(1000px) rotateY(${x * 10}deg) rotateX(${-y * 10}deg) translateX(${x * -20}px) translateY(${y * -20}px)`;
        });
        s.addEventListener('mouseleave', () => {
            img.style.transform = `translateY(-50%) scale(0.6)`;
        });
    }
    
    window.addEventListener('load', updP);
    window.addEventListener('resize', updP);
})();</script><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-23 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-max-width:400px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-12 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><img decoding="async" width="1024" height="1024" title="50" src="https://heartucate.eu/wp-content/uploads/2025/12/50.png" alt class="img-responsive wp-image-57409" srcset="https://heartucate.eu/wp-content/uploads/2025/12/50-200x200.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/50-400x400.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/50-600x600.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/50-800x800.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/50.png 1024w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-24 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-7 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#035e73;--awb-margin-top:55px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">Out of the filter bubble: The AR role-playing game against conspiracy myths</h3></div><div class="fusion-text fusion-text-20 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>Transform your classroom into a digital battlefield of opinions. In this immersive augmented reality experience, you project a shared virtual space onto a floor mat where nothing is as it seems. You slip into fixed roles, but be careful: special optical filters distort your vision and simulate your group&#8217;s “bias.” Experience firsthand how limited perspectives arise and work as a team to develop your own perfect conspiracy theory.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-25 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-padding-top:55px;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-title title fusion-title-8 fusion-sep-none fusion-title-text fusion-title-size-three fusion-animated" style="--awb-text-color:#035e73;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:10px;--awb-margin-left-small:0px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationOffset="top-into-view"><h3 class="fusion-title-heading title-heading-left fusion-responsive-typography-calculated" style="margin:0;--fontSize:46;line-height:var(--awb-typography1-line-height);">Power, money, and algorithms: Who controls the ‘fake internet’?</h3></div><div class="fusion-text fusion-text-21 fusion-animated" style="--awb-margin-top:-10px;" data-animationType="zoomIn" data-animationDuration="0.8" data-animationDelay="0.3" data-animationOffset="top-into-view"><p>What happens to your theories when they go online? Our specially developed interactive search engine simulates the harsh dynamics of the web. Enter your “facts” and watch the battle for interpretive authority unfold: while economic actors push their contributions to the top with their budgets, scientists try to verify their veracity. Learn in a playful way how influence and capital control our flood of information—and how important it is to take a critical look at the source.</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-26 fusion_builder_column_inner_1_2 1_2 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:120px;--awb-spacing-right-large:3.84%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:3.84%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-image-element " style="text-align:center;--awb-max-width:400px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-13 hover-type-none fusion-animated" data-animationType="zoomIn" data-animationDuration="0.3" data-animationOffset="top-into-view"><img decoding="async" width="1248" height="936" title="epic1" src="https://heartucate.eu/wp-content/uploads/2025/12/epic1.png" alt class="img-responsive wp-image-57410" srcset="https://heartucate.eu/wp-content/uploads/2025/12/epic1-200x150.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/epic1-400x300.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/epic1-600x450.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/epic1-800x600.png 800w, https://heartucate.eu/wp-content/uploads/2025/12/epic1-1200x900.png 1200w, https://heartucate.eu/wp-content/uploads/2025/12/epic1.png 1248w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 600px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><style>
#bento-2618 { position: relative; width: 100vw; left: 50%; margin-left: -50vw; box-sizing: border-box; font-family: 'Geometria', sans-serif; padding: 80px 40px; background: transparent; overflow: hidden; }
@media(max-width: 768px) { #bento-2618 { padding: 40px 15px; } }
#bento-2618::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #4F46E5, #818CF8, #C7D2FE, #312E81); opacity: 0.15; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); }
#bento-2618 .bento-grid { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 20px; max-width: 1200px; margin: 0 auto; grid-auto-rows: 90px; }
@media(max-width: 1200px) { #bento-2618 .bento-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; } }
@media(max-width: 800px) { #bento-2618 .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }
#bento-2618 .bento-item { position: relative; border-radius: 24px; transform-style: preserve-3d; cursor: pointer; transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
#bento-2618 .span-c-1 { grid-column: span 1; } #bento-2618 .span-c-2 { grid-column: span 2; } #bento-2618 .span-c-3 { grid-column: span 3; } #bento-2618 .span-c-4 { grid-column: span 4; } #bento-2618 .span-c-5 { grid-column: span 5; } #bento-2618 .span-c-6 { grid-column: span 6; }
#bento-2618 .span-r-1 { grid-row: span 1; } #bento-2618 .span-r-2 { grid-row: span 2; } #bento-2618 .span-r-3 { grid-row: span 3; } #bento-2618 .span-r-4 { grid-row: span 4; } #bento-2618 .span-r-5 { grid-row: span 5; } #bento-2618 .span-r-6 { grid-row: span 6; }
@media(max-width: 800px) { #bento-2618 .bento-item { grid-column: span 1 !important; grid-row: span 1 !important; } #bento-2618 .bento-item.span-c-3, #bento-2618 .bento-item.span-c-4, #bento-2618 .bento-item.span-c-5, #bento-2618 .bento-item.span-c-6 { grid-column: span 2 !important; grid-row: span 2 !important; } }
#bento-2618 .bento-item.expanded { grid-column: span var(--exp-c, 4) !important; grid-row: span var(--exp-r, 4) !important; z-index: 100; }
@media(max-width: 1200px) { #bento-2618 .bento-item.expanded { grid-column: span min(var(--exp-c, 4), 4) !important; } }
@media(max-width: 800px) { #bento-2618 .bento-item.expanded { grid-column: span 2 !important; grid-row: span 3 !important; } #bento-2618 .bento-item.expanded[data-type="video"] { aspect-ratio: 16/9 !important; height: auto !important; min-height: unset !important; grid-row: span 2 !important; } }
#bento-2618 .bento-grid.has-expanded .bento-item:not(.expanded) { opacity: 0.4; transform: scale(0.96); filter: grayscale(100%); pointer-events: auto; }
#bento-2618 .bento-inner { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease-out; transform: translateZ(0); }
#bento-2618 .bento-item.expanded .bento-inner { transform: none !important; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5); border: 3px solid #4F46E5; }
#bento-2618 .bento-warp-bg { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg, #4F46E5, #818CF8); opacity: 0; z-index: -1; transform: scale(0.8); pointer-events: none; }
@keyframes warpShock-bento-2618 { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.4); } }
#bento-2618 .bento-item.expanded .bento-warp-bg { animation: warpShock-bento-2618 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#bento-2618 .bento-media-wrap { width: 100%; height: 100%; position: relative; }
#bento-2618 img, #bento-2618 video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
#bento-2618 .bento-item:not(.expanded):hover img { transform: scale(1.08); }
#bento-2618 .bento-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 40px; text-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; transition: opacity 0.3s; opacity: 0; }
#bento-2618 .bento-item[data-type="video"]:not(.expanded):hover .bento-play-icon { opacity: 1; }
#bento-2618 .bento-item.expanded .bento-play-icon { display: none; }
#bento-2618 .bento-close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border-radius: 50%; color: white; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 101; opacity: 0; pointer-events: none; transform: scale(0.8); transition: all 0.4s ease; }
#bento-2618 .bento-item.expanded .bento-close-btn { opacity: 1; pointer-events: all; transform: scale(1); }
#bento-2618 .bento-close-btn:hover { background: #C63F40; transform: scale(1.1); }
#bento-2618 .bento-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; }
#bento-2618 .bento-item:hover:not(.expanded) .bento-overlay { opacity: 1; transform: translateY(0); }
#bento-2618 .bento-item.expanded .bento-overlay { opacity: 0; }
#bento-2618 h3 { margin: 0; color: white; font-size: 18px; font-weight: 700; }
</style>
<div id="bento-2618"><div class="bento-grid" id="grid-bento-2618">
                <div class="bento-item span-c-2 span-r-5 js-bento-card" data-type="image" style="--exp-c: 4; --exp-r: 9;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/epic2.png" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3>Wahrheit?</h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-3 js-bento-card" data-type="image" style="--exp-c: 3; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/Screenshot_20240726-143859_Quelle-Internet-600x1267.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-5 js-bento-card" data-type="image" style="--exp-c: 4; --exp-r: 9;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2025/12/epic31.png" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-2 js-bento-card" data-type="image" style="--exp-c: 3; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/Screenshot_20240726-143919_Quelle-Internet-600x1267.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-4 js-bento-card" data-type="image" style="--exp-c: 3; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/Screenshot_20240726-144011_Quelle-Internet-600x1267.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-4 js-bento-card" data-type="image" style="--exp-c: 3; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/Screenshot_20240726-143825_Quelle-Internet-600x1267.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div>
                <div class="bento-item span-c-2 span-r-4 js-bento-card" data-type="image" style="--exp-c: 3; --exp-r: 6;">
                    <div class="bento-warp-bg"></div>
                    <div class="bento-inner">
                        <div class="bento-close-btn">✕</div>
                        <div class="bento-media-wrap"><img decoding="async" src="https://heartucate.eu/wp-content/uploads/2024/07/Screenshot_20240726-143919_Quelle-Internet-600x1267.jpg" alt="" loading="lazy"></div>
                        <div class="bento-overlay"><h3></h3></div>
                    </div>
                </div></div></div>
<script>(function(){const grid=document.getElementById('grid-bento-2618'),cards=grid.querySelectorAll('.js-bento-card');cards.forEach(el=>{const vid=el.querySelector('video'),closeBtn=el.querySelector('.bento-close-btn'),inner=el.querySelector('.bento-inner');el.addEventListener('mousemove',(e)=>{if(el.classList.contains('expanded'))return;const r=el.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,cX=r.width/2,cY=r.height/2,rX=((y-cY)/cY)*-4,rY=((x-cX)/cX)*4;inner.style.transform=`perspective(1000px) rotateX(${rX}deg) rotateY(${rY}deg) scale(1.02)`});el.addEventListener('mouseleave',()=>{if(!el.classList.contains('expanded'))inner.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale(1)'});el.addEventListener('click',(e)=>{if(el.classList.contains('expanded')&&vid)return;if(el.classList.contains('expanded')&&!vid)return;cards.forEach(c=>{const cVid=c.querySelector('video');if(cVid){cVid.muted=true;cVid.loop=true;cVid.removeAttribute('controls');cVid.play()}c.classList.remove('expanded')});grid.classList.add('has-expanded');el.classList.add('expanded');inner.style.transform='';if(vid){vid.currentTime=0;vid.muted=false;vid.loop=false;vid.setAttribute('controls','true');vid.play()}setTimeout(()=>el.scrollIntoView({behavior:'smooth',block:'center'}),400)});if(closeBtn){closeBtn.addEventListener('click',(e)=>{e.stopPropagation();el.classList.remove('expanded');grid.classList.remove('has-expanded');if(vid){vid.muted=true;vid.loop=true;vid.removeAttribute('controls');vid.play()}})}})})();</script><div class="fusion-text fusion-text-22 fusion-animated" style="--awb-text-color:#035e73;" data-animationType="zoomIn" data-animationDuration="0.3" data-animationOffset="top-into-view"><h2><strong><span style="color: #035e73;">Credits:</span></strong></h2>
</div><div class="fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap" style="--awb-min-height:no;--awb-min-height-medium:no;--awb-min-height-small:no;--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );"><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-27 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-23"><p><strong style="color: #035e73;">Concept:</strong><br />
Franziska Weser &amp; Franca Poltz</p>
<p><strong style="color: #035e73;">Technical Lead:</strong><br />
Vincent Schiller</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-28 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-24"><p><strong>Development Fake Internet</strong><br />
Moritz Kinder</p>
</div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-29 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-25"><p style="color: #035e73;"><strong>Client:</strong></p>
</div><div class="fusion-image-element " style="--awb-max-width:200px;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-14 hover-type-none"><img decoding="async" width="741" height="400" title="03_Logo_epic-education_vertikal-1" src="https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2.png" alt class="img-responsive wp-image-57176" srcset="https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2-200x108.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2-400x216.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2-600x324.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/03_Logo_epic-education_vertikal-1-2.png 741w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px" /></span></div></div></div><div class="fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-30 fusion_builder_column_inner_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:7.68%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;"><div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-26"><div class="fusion-text fusion-text-8">
<p><strong>Funded by:</strong></p>
</div>
</div><div class="fusion-image-element " style="--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);"><span class=" fusion-imageframe imageframe-none imageframe-15 hover-type-none"><img decoding="async" width="800" height="271" title="BMFSFJ_DL_mitFoerderzusatz-800&#215;271" src="https://heartucate.eu/wp-content/uploads/2025/12/BMFSFJ_DL_mitFoerderzusatz-800x271-1.png" alt class="img-responsive wp-image-57678" srcset="https://heartucate.eu/wp-content/uploads/2025/12/BMFSFJ_DL_mitFoerderzusatz-800x271-1-200x68.png 200w, https://heartucate.eu/wp-content/uploads/2025/12/BMFSFJ_DL_mitFoerderzusatz-800x271-1-400x136.png 400w, https://heartucate.eu/wp-content/uploads/2025/12/BMFSFJ_DL_mitFoerderzusatz-800x271-1-600x203.png 600w, https://heartucate.eu/wp-content/uploads/2025/12/BMFSFJ_DL_mitFoerderzusatz-800x271-1.png 800w" sizes="(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px" /></span></div></div></div></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div><div class="fusion-separator fusion-full-width-sep" style="align-self: center;margin-left: auto;margin-right: auto;margin-top:25px;width:100%;"></div></div></div></div></div>
<p>Der Beitrag <a href="https://heartucate.eu/en/cooperations/epic-education-quelle-internet/">epic education &#8211; Quelle Internet?!</a> erschien zuerst auf <a href="https://heartucate.eu/en">Heartucate</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
