{"id":4405,"date":"2026-05-22T12:12:54","date_gmt":"2026-05-22T12:12:54","guid":{"rendered":"https:\/\/hyend.de\/?page_id=4405"},"modified":"2026-08-27T14:27:34","modified_gmt":"2026-08-27T14:27:34","slug":"lumina","status":"publish","type":"page","link":"https:\/\/hyend.de\/index.php\/lumina\/","title":{"rendered":"Lumina"},"content":{"rendered":"\n<style>\n  .hyend-interactive-image {\n    --hyend-orange: #FF8200;\n    --hyend-card-bg: #23262B;\n    --hyend-white: #ffffff;\n    --hyend-safe-inset: 5px;\n    --hyend-mobile-zoom-width: 900px;\n    --hyend-marker-size: 10px;\n    --hyend-marker-hit-size: 22px;\n    --hyend-marker-pulse-opacity: 0.42;\n\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 90px 120px;\n    box-sizing: border-box;\n    overflow: visible;\n    background: transparent;\n  }\n\n  .hyend-interactive-stage {\n    position: relative;\n    width: 100%;\n  }\n\n  .hyend-scroll-content {\n    position: relative;\n    width: 100%;\n    transform-origin: left top;\n  }\n\n  .hyend-interactive-stage img {\n    display: block;\n    width: 100%;\n    height: auto;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .hyend-overlay {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n    z-index: 2;\n    transition: opacity 0.45s ease;\n  }\n\n  .hyend-interactive-image.is-ready .hyend-overlay {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .hyend-item {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .hyend-line-svg {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    pointer-events: none;\n    z-index: 6;\n  }\n\n  .hyend-line {\n    fill: none;\n    stroke: var(--hyend-white);\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    opacity: 0;\n    transition: opacity 0.22s ease;\n  }\n\n  .hyend-marker {\n    position: absolute;\n    left: var(--point-x);\n    top: var(--point-y);\n    width: var(--hyend-marker-hit-size);\n    height: var(--hyend-marker-hit-size);\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    transform: translate(-50%, -50%);\n    cursor: pointer;\n    pointer-events: auto;\n    z-index: 7;\n    touch-action: manipulation;\n  }\n\n  .hyend-marker::before {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: var(--hyend-marker-size);\n    height: var(--hyend-marker-size);\n    border: 1.5px solid var(--hyend-white);\n    border-radius: 50%;\n    background: var(--hyend-orange);\n    transform: translate(-50%, -50%);\n    transition:\n      background 0.18s ease,\n      box-shadow 0.18s ease,\n      transform 0.18s ease;\n  }\n\n  .hyend-marker::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: calc(var(--hyend-marker-size) + 12px);\n    height: calc(var(--hyend-marker-size) + 12px);\n    border-radius: 50%;\n    border: 1px solid rgba(255, 130, 0, 0.55);\n    background: rgba(255, 130, 0, 0.1);\n    opacity: 0.75;\n    transform: translate(-50%, -50%) scale(0.9);\n    animation: hyend-marker-pulse 2.8s ease-in-out infinite;\n    pointer-events: none;\n  }\n\n  @keyframes hyend-marker-pulse {\n    0%, 100% {\n      opacity: 0.45;\n      transform: translate(-50%, -50%) scale(0.9);\n    }\n    50% {\n      opacity: 0.95;\n      transform: translate(-50%, -50%) scale(1.08);\n    }\n  }\n\n  .hyend-marker:hover::before {\n    transform: translate(-50%, -50%) scale(1.22);\n  }\n\n  .hyend-marker:active::before {\n    transform: translate(-50%, -50%) scale(1.05);\n  }\n\n  .hyend-marker:focus-visible {\n    outline: 3px solid var(--hyend-white);\n    outline-offset: 2px;\n  }\n\n  .hyend-card,\n  .hyend-mobile-card {\n    box-sizing: border-box;\n    padding: 14px 16px;\n    background: var(--hyend-card-bg);\n    color: var(--hyend-white);\n    font-family: inherit;\n    font-size: inherit !important;\n    line-height: 1.45;\n  }\n\n  .hyend-card {\n    position: absolute;\n    left: var(--box-x);\n    top: var(--box-y);\n    width: fit-content;\n    max-width: var(--card-max-width, 270px);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.18s ease;\n    z-index: 4;\n  }\n\n  .hyend-card::before,\n  .hyend-mobile-card::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-left: 1px solid rgba(255, 255, 255, 0.14);\n    border-right: 1px solid rgba(255, 255, 255, 0.14);\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n    pointer-events: none;\n  }\n\n  .hyend-card::after,\n  .hyend-mobile-card::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 14px;\n    width: 3px;\n    height: 28px;\n    background: var(--hyend-orange);\n  }\n\n  .hyend-card h3,\n  .hyend-mobile-card h3 {\n    margin: 0 0 7px;\n    padding-left: 8px;\n    padding-right: 20px;\n    font-size: inherit !important;\n    font-weight: 700;\n    line-height: 1.35;\n    color: var(--hyend-white);\n  }\n\n  .hyend-card p,\n  .hyend-mobile-card p {\n    margin: 0;\n    padding-left: 8px;\n    font-size: inherit !important;\n    line-height: 1.45;\n    color: rgba(255, 255, 255, 0.82);\n  }\n\n  .hyend-card-close {\n    position: absolute;\n    right: 8px;\n    top: 6px;\n    width: 24px;\n    height: 24px;\n    border: 0;\n    background: transparent;\n    color: var(--hyend-white);\n    font-size: inherit !important;\n    line-height: 1;\n    cursor: pointer;\n    opacity: 0.7;\n    z-index: 2;\n  }\n\n  .hyend-card-close:hover,\n  .hyend-card-close:focus-visible {\n    opacity: 1;\n  }\n\n  .hyend-mobile-card {\n    display: none;\n    position: relative;\n    width: 100%;\n    margin-top: 16px;\n  }\n\n  .hyend-mobile-card.is-visible {\n    display: block;\n  }\n\n  .hyend-mobile-hint {\n    display: none;\n    margin: 10px 16px 0;\n    color: rgba(255, 255, 255, 0.72);\n    font-size: inherit !important;\n    line-height: 1.4;\n  }\n\n  .hyend-mobile-hint.is-visible {\n    display: block;\n  }\n\n  .hyend-item.is-open,\n  .hyend-item.is-active {\n    z-index: 9;\n  }\n\n  .hyend-item.is-open .hyend-marker::before,\n  .hyend-item.is-active .hyend-marker::before {\n    background: var(--hyend-white);\n    box-shadow: 0 0 0 5px rgba(255, 130, 0, 0.18);\n    transform: translate(-50%, -50%) scale(1.15);\n  }\n\n  .hyend-item.is-open .hyend-marker::after,\n  .hyend-item.is-active .hyend-marker::after {\n    animation-play-state: paused;\n    opacity: 1;\n  }\n\n  .hyend-item.is-open .hyend-card,\n  .hyend-item.is-active .hyend-card {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .hyend-item.is-open .hyend-line,\n  .hyend-item.is-active .hyend-line {\n    opacity: 1;\n  }\n\n  @media (max-width: 1050px) {\n    .hyend-interactive-image {\n      padding: 70px 40px;\n    }\n  }\n\n  @media (max-width: 700px) {\n    .hyend-interactive-image {\n      --hyend-marker-size: 13px;\n      --hyend-marker-hit-size: 26px;\n      padding: 24px 0;\n    }\n\n    .hyend-interactive-stage {\n      position: relative;\n      width: 100%;\n      overflow-x: auto;\n      overflow-y: hidden;\n      -webkit-overflow-scrolling: touch;\n      scroll-behavior: smooth;\n      touch-action: pan-x pan-y pinch-zoom;\n    }\n\n    .hyend-scroll-content {\n      width: 100%;\n      transition: width 1.25s ease;\n    }\n\n    .hyend-interactive-image.is-mobile-zoomed .hyend-scroll-content {\n      width: var(--hyend-mobile-zoom-width);\n    }\n\n    .hyend-interactive-stage img {\n      width: 100%;\n      max-width: none;\n      height: auto;\n    }\n\n    .hyend-overlay {\n      width: 100%;\n      height: 100%;\n    }\n\n    .hyend-line-svg,\n    .hyend-card {\n      display: none;\n    }\n\n    .hyend-mobile-card {\n      display: none;\n      width: auto;\n      margin: 16px 16px 0;\n      padding: 12px 14px;\n      font-size: inherit !important;\n    }\n\n    .hyend-mobile-card.is-visible {\n      display: block;\n    }\n\n    .hyend-mobile-card h3 {\n      font-size: inherit !important;\n    }\n\n    .hyend-mobile-card p {\n      font-size: inherit !important;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .hyend-marker::after {\n      animation: none;\n    }\n\n    .hyend-card,\n    .hyend-line,\n    .hyend-scroll-content {\n      transition: none;\n    }\n  }\n<\/style>\n\n<script>\n  window.HyendInteractiveImage = class {\n    constructor(selector, options) {\n      this.container = document.querySelector(selector);\n      if (!this.container) return;\n\n      this.image = options.image;\n      this.alt = options.alt || \"\";\n      this.cardMaxWidth = options.cardMaxWidth || 270;\n      this.safeInset = options.safeInset || 5;\n      this.items = options.items || [];\n\n      this.mobileMinWidth = 0;\n      this.mobileMaxWidth = options.mobileMaxWidth || 1400;\n      this.mobileZoomWidth = options.mobileZoomWidth || 720;\n      this.enableMobileIntroZoom = options.enableMobileIntroZoom !== false;\n      this.resizeRaf = 0;\n\n      this.hoverDelay = options.hoverDelay || 140;\n      this.hoverTimers = new WeakMap();\n\n      this.activeTouches = new Map();\n      this.pinchStartDistance = 0;\n      this.pinchStartWidth = 0;\n\n      this.init();\n    }\n\n    init() {\n      this.container.classList.add(\"hyend-interactive-image\");\n      this.container.style.setProperty(\"--hyend-mobile-zoom-width\", this.mobileZoomWidth + \"px\");\n      this.container.innerHTML = \"\";\n\n      this.stage = document.createElement(\"div\");\n      this.stage.className = \"hyend-interactive-stage\";\n\n      this.scrollContent = document.createElement(\"div\");\n      this.scrollContent.className = \"hyend-scroll-content\";\n\n      const img = document.createElement(\"img\");\n      img.src = this.image;\n      img.alt = this.alt;\n      img.draggable = false;\n\n      this.overlay = document.createElement(\"div\");\n      this.overlay.className = \"hyend-overlay\";\n\n      this.mobileHint = document.createElement(\"div\");\n      this.mobileHint.className = \"hyend-mobile-hint\";\n      this.mobileHint.textContent = \"Tippen Sie auf die Punkte oder zoomen Sie mit zwei Fingern.\";\n\n      this.mobileCard = document.createElement(\"div\");\n      this.mobileCard.className = \"hyend-mobile-card\";\n\n      this.scrollContent.appendChild(img);\n      this.scrollContent.appendChild(this.overlay);\n      this.stage.appendChild(this.scrollContent);\n\n      this.container.appendChild(this.stage);\n      this.container.appendChild(this.mobileHint);\n      this.container.appendChild(this.mobileCard);\n\n      this.items.forEach((item) => this.createItem(item));\n\n      const handleImageReady = () => {\n        this.mobileMinWidth = this.stage.clientWidth;\n        this.redrawAll();\n\n        if (this.isMobile() && this.enableMobileIntroZoom) {\n          this.setupMobileIntroAnimation();\n        } else {\n          setTimeout(() => {\n            this.container.classList.add(\"is-ready\");\n          }, 500);\n        }\n\n        this.showInitialMobileState();\n      };\n\n      if (img.complete) {\n        requestAnimationFrame(handleImageReady);\n      } else {\n        img.addEventListener(\"load\", handleImageReady, { once: true });\n      }\n\n      window.addEventListener(\"resize\", () => {\n        this.mobileMinWidth = this.stage.clientWidth;\n\n        if (this.resizeRaf) {\n          cancelAnimationFrame(this.resizeRaf);\n        }\n\n        this.resizeRaf = requestAnimationFrame(() => {\n          this.redrawAll();\n          this.resizeRaf = 0;\n        });\n      });\n\n      this.enablePinchZoom();\n\n      document.addEventListener(\"click\", (event) => {\n        if (!this.container.contains(event.target)) {\n          this.closeAll();\n        }\n      });\n\n      setTimeout(() => this.redrawAll(), 50);\n      setTimeout(() => this.redrawAll(), 300);\n    }\n\n    isMobile() {\n      return window.matchMedia(\"(max-width: 700px)\").matches;\n    }\n\n    setupMobileIntroAnimation() {\n      if (!this.isMobile()) return;\n\n      let introStarted = false;\n\n      const startIntro = () => {\n        if (introStarted) return;\n        introStarted = true;\n\n        this.container.classList.remove(\"is-ready\");\n        this.container.classList.remove(\"is-mobile-zoomed\");\n        this.scrollContent.style.width = \"100%\";\n        this.scrollContent.style.transition = \"width 1.25s ease\";\n\n        \/\/ Reflow erzwingen, damit der Browser den Startzustand 100% wirklich animiert.\n        this.scrollContent.offsetWidth;\n\n        setTimeout(() => {\n          this.container.classList.add(\"is-mobile-zoomed\");\n\n          setTimeout(() => {\n            this.stage.scrollLeft = 0;\n            this.redrawAll();\n            this.container.classList.add(\"is-ready\");\n          }, 1250);\n        }, 500);\n      };\n\n      if (!(\"IntersectionObserver\" in window)) {\n        startIntro();\n        return;\n      }\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              startIntro();\n              observer.disconnect();\n            }\n          });\n        },\n        { threshold: [0.15] }\n      );\n\n      observer.observe(this.stage);\n    }\n\n    showInitialMobileState() {\n      if (!this.isMobile()) return;\n\n      this.mobileHint.classList.add(\"is-visible\");\n\n      setTimeout(() => {\n        if (this.mobileHint) {\n          this.mobileHint.classList.remove(\"is-visible\");\n        }\n      }, 5500);\n    }\n\n    enablePinchZoom() {\n      this.stage.addEventListener(\n        \"touchstart\",\n        (event) => {\n          if (!this.isMobile()) return;\n\n          Array.from(event.changedTouches).forEach((touch) => {\n            this.activeTouches.set(touch.identifier, touch);\n          });\n\n          if (this.activeTouches.size === 2) {\n            const touches = Array.from(this.activeTouches.values());\n\n            this.pinchStartDistance = this.getTouchDistance(touches[0], touches[1]);\n            this.pinchStartWidth = this.scrollContent.getBoundingClientRect().width;\n\n            this.scrollContent.style.transition = \"none\";\n          }\n        },\n        { passive: false }\n      );\n\n      this.stage.addEventListener(\n        \"touchmove\",\n        (event) => {\n          if (!this.isMobile()) return;\n\n          Array.from(event.changedTouches).forEach((touch) => {\n            if (this.activeTouches.has(touch.identifier)) {\n              this.activeTouches.set(touch.identifier, touch);\n            }\n          });\n\n          if (this.activeTouches.size === 2) {\n            event.preventDefault();\n\n            const touches = Array.from(this.activeTouches.values());\n            const currentDistance = this.getTouchDistance(touches[0], touches[1]);\n\n            if (!this.pinchStartDistance) return;\n\n            const scale = currentDistance \/ this.pinchStartDistance;\n            const nextWidth = this.clamp(\n              this.pinchStartWidth * scale,\n              Math.max(this.mobileMinWidth, this.stage.clientWidth),\n              this.mobileMaxWidth\n            );\n\n            this.scrollContent.style.width = nextWidth + \"px\";\n          }\n        },\n        { passive: false }\n      );\n\n      this.stage.addEventListener(\n        \"touchend\",\n        (event) => {\n          this.removeEndedTouches(event);\n        },\n        { passive: true }\n      );\n\n      this.stage.addEventListener(\n        \"touchcancel\",\n        (event) => {\n          this.removeEndedTouches(event);\n        },\n        { passive: true }\n      );\n    }\n\n    removeEndedTouches(event) {\n      Array.from(event.changedTouches).forEach((touch) => {\n        this.activeTouches.delete(touch.identifier);\n      });\n\n      if (this.activeTouches.size < 2) {\n        this.pinchStartDistance = 0;\n        this.pinchStartWidth = 0;\n        this.scrollContent.style.transition = \"none\";\n      }\n    }\n\n    getTouchDistance(touchA, touchB) {\n      const dx = touchA.clientX - touchB.clientX;\n      const dy = touchA.clientY - touchB.clientY;\n      return Math.sqrt(dx * dx + dy * dy);\n    }\n\n    clamp(value, min, max) {\n      return Math.min(Math.max(value, min), max);\n    }\n\n    createItem(item) {\n      const edge = item.box.edge === \"bottom\" ? \"bottom\" : \"top\";\n\n      const element = document.createElement(\"div\");\n      element.className = \"hyend-item\";\n      element.dataset.edge = edge;\n\n      element.style.setProperty(\"--point-x\", item.point.x + \"%\");\n      element.style.setProperty(\"--point-y\", item.point.y + \"%\");\n      element.style.setProperty(\"--box-x\", item.box.x + \"%\");\n      element.style.setProperty(\"--box-y\", item.box.y + \"%\");\n      element.style.setProperty(\"--card-max-width\", this.cardMaxWidth + \"px\");\n\n      const svg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\n      svg.classList.add(\"hyend-line-svg\");\n\n      const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\n      path.classList.add(\"hyend-line\");\n\n      svg.appendChild(path);\n\n      const marker = document.createElement(\"button\");\n      marker.className = \"hyend-marker\";\n      marker.type = \"button\";\n      marker.setAttribute(\"aria-label\", \"Informationen zu \" + item.title + \" anzeigen\");\n\n      const card = document.createElement(\"div\");\n      card.className = \"hyend-card\";\n\n      const closeButton = document.createElement(\"button\");\n      closeButton.className = \"hyend-card-close\";\n      closeButton.type = \"button\";\n      closeButton.setAttribute(\"aria-label\", \"Information schlie\u00dfen\");\n      closeButton.textContent = \"\u00d7\";\n\n      const title = document.createElement(\"h3\");\n      title.textContent = item.title;\n\n      const text = document.createElement(\"p\");\n      text.textContent = item.text;\n\n      card.appendChild(closeButton);\n      card.appendChild(title);\n      card.appendChild(text);\n\n      element.appendChild(svg);\n      element.appendChild(marker);\n      element.appendChild(card);\n\n      this.overlay.appendChild(element);\n\n      marker.addEventListener(\"mouseenter\", () => {\n        if (this.isMobile()) return;\n\n        const timer = setTimeout(() => {\n          this.openItem(element, false);\n        }, this.hoverDelay);\n\n        this.hoverTimers.set(element, timer);\n      });\n\n      marker.addEventListener(\"mouseleave\", () => {\n        const timer = this.hoverTimers.get(element);\n        if (timer) clearTimeout(timer);\n\n        if (!element.classList.contains(\"is-active\")) {\n          this.closeItem(element);\n        }\n      });\n\n      marker.addEventListener(\"click\", (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        this.openItem(element, true);\n\n        if (navigator.vibrate && this.isMobile()) {\n          navigator.vibrate(12);\n        }\n\n        if (this.isMobile()) {\n          this.showMobileCard(item);\n\n          this.stage.scrollIntoView({\n            behavior: \"smooth\",\n            block: \"start\"\n          });\n        }\n      });\n\n      marker.addEventListener(\"focus\", () => {\n        if (!this.isMobile()) {\n          this.openItem(element, false);\n        }\n      });\n\n      closeButton.addEventListener(\"click\", (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.closeAll();\n      });\n\n      closeButton.addEventListener(\"touchend\", (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.closeAll();\n      }, { passive: false });\n\n      requestAnimationFrame(() => this.drawLine(element));\n    }\n\n    showMobileCard(item) {\n      this.mobileCard.innerHTML = \"\";\n\n      const closeButton = document.createElement(\"button\");\n      closeButton.className = \"hyend-card-close\";\n      closeButton.type = \"button\";\n      closeButton.setAttribute(\"aria-label\", \"Information schlie\u00dfen\");\n      closeButton.textContent = \"\u00d7\";\n\n      const title = document.createElement(\"h3\");\n      title.textContent = item.title;\n\n      const text = document.createElement(\"p\");\n      text.textContent = item.text;\n\n      this.mobileCard.appendChild(closeButton);\n      this.mobileCard.appendChild(title);\n      this.mobileCard.appendChild(text);\n      this.mobileCard.classList.add(\"is-visible\");\n\n      closeButton.addEventListener(\"click\", (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.closeAll();\n      });\n\n      closeButton.addEventListener(\"touchend\", (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.closeAll();\n      }, { passive: false });\n\n      if (this.mobileHint) {\n        this.mobileHint.classList.remove(\"is-visible\");\n      }\n    }\n\n    openItem(targetElement, makeActive) {\n      const elements = this.overlay.querySelectorAll(\".hyend-item\");\n      const activeElement = document.activeElement;\n\n      elements.forEach((element) => {\n        element.classList.remove(\"is-open\");\n        element.classList.remove(\"is-active\");\n      });\n\n      if (\n        activeElement &&\n        this.container.contains(activeElement) &&\n        !targetElement.contains(activeElement) &&\n        typeof activeElement.blur === \"function\"\n      ) {\n        activeElement.blur();\n      }\n\n      targetElement.classList.add(makeActive ? \"is-active\" : \"is-open\");\n      this.drawLine(targetElement);\n    }\n\n    closeItem(element) {\n      element.classList.remove(\"is-open\");\n      element.classList.remove(\"is-active\");\n    }\n\n    closeAll() {\n      const activeElement = document.activeElement;\n\n      if (activeElement && this.container.contains(activeElement) && typeof activeElement.blur === \"function\") {\n        activeElement.blur();\n      }\n\n      const elements = this.overlay.querySelectorAll(\".hyend-item\");\n\n      elements.forEach((element) => {\n        element.classList.remove(\"is-open\");\n        element.classList.remove(\"is-active\");\n      });\n\n      if (this.mobileCard) {\n        this.mobileCard.classList.remove(\"is-visible\");\n        this.mobileCard.innerHTML = \"\";\n      }\n    }\n\n    redrawAll() {\n      if (!this.overlay) return;\n\n      const elements = this.overlay.querySelectorAll(\".hyend-item\");\n      elements.forEach((element) => this.drawLine(element));\n    }\n\n    drawLine(element) {\n      if (this.isMobile()) return;\n\n      const path = element.querySelector(\".hyend-line\");\n      const marker = element.querySelector(\".hyend-marker\");\n      const card = element.querySelector(\".hyend-card\");\n      const edge = element.dataset.edge || \"top\";\n      const safeInset = this.safeInset;\n\n      if (!path || !marker || !card) return;\n\n      card.style.left = \"var(--box-x)\";\n      card.style.top = \"var(--box-y)\";\n\n      const stageRect = this.stage.getBoundingClientRect();\n      const markerRect = marker.getBoundingClientRect();\n      let cardRect = card.getBoundingClientRect();\n\n      const stageWidth = this.stage.clientWidth;\n      const stageHeight = this.stage.clientHeight;\n\n      const markerX = markerRect.left - stageRect.left + markerRect.width \/ 2;\n      const markerY = markerRect.top - stageRect.top + markerRect.height \/ 2;\n\n      let boxTop = cardRect.top - stageRect.top;\n      let boxWidth = cardRect.width;\n      let boxHeight = cardRect.height;\n\n      let correctedBoxTop = Math.max(\n        safeInset,\n        Math.min(stageHeight - boxHeight - safeInset, boxTop)\n      );\n\n      card.style.top = correctedBoxTop + \"px\";\n\n      cardRect = card.getBoundingClientRect();\n\n      let boxLeft = cardRect.left - stageRect.left;\n      boxTop = cardRect.top - stageRect.top;\n      boxWidth = cardRect.width;\n      boxHeight = cardRect.height;\n\n      let boxBottom = boxTop + boxHeight;\n      let boxCenterX = boxLeft + boxWidth \/ 2;\n\n      const edgeY = edge === \"bottom\" ? boxBottom : boxTop;\n      const sx = boxCenterX >= markerX ? 1 : -1;\n      const verticalDistance = edgeY - markerY;\n      const horizontalDistance = Math.abs(verticalDistance);\n      const desiredConnectionX = markerX + sx * horizontalDistance;\n\n      let desiredBoxLeft;\n\n      if (sx > 0) {\n        desiredBoxLeft = desiredConnectionX;\n      } else {\n        desiredBoxLeft = desiredConnectionX - boxWidth;\n      }\n\n      desiredBoxLeft = Math.max(\n        safeInset,\n        Math.min(stageWidth - boxWidth - safeInset, desiredBoxLeft)\n      );\n\n      card.style.left = desiredBoxLeft + \"px\";\n\n      cardRect = card.getBoundingClientRect();\n\n      boxLeft = cardRect.left - stageRect.left;\n      const boxRight = cardRect.right - stageRect.left;\n      boxTop = cardRect.top - stageRect.top;\n      boxBottom = cardRect.bottom - stageRect.top;\n\n      const correctedEdgeY = edge === \"bottom\" ? boxBottom : boxTop;\n      const connectionX = sx > 0 ? boxLeft : boxRight;\n\n      path.setAttribute(\n        \"d\",\n        \"M \" + markerX + \" \" + markerY +\n        \" L \" + connectionX + \" \" + correctedEdgeY +\n        \" M \" + boxLeft + \" \" + correctedEdgeY +\n        \" L \" + boxRight + \" \" + correctedEdgeY\n      );\n    }\n  };\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================\n   INTRO\n   ========================================= *\/\n\n.lumina-intro {\n  display: flex;\n  align-items: flex-start;\n\n  gap: clamp(1.75rem, 3vw, 2.25rem);\n\n  width: 100%;\n\n  margin-bottom: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n\n\/* Logo container *\/\n\n.lumina-intro-logo-wrapper {\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n\n  width: clamp(140px, 14vw, 160px);\n}\n\n\n\/* LUMINA patch *\/\n\n.lumina-intro-logo {\n  display: block;\n\n  width: 100%;\n  height: auto;\n\n  filter: drop-shadow(\n    0 10px 20px rgba(0, 0, 0, 0.14)\n  );\n}\n\n\n\/* Intro text *\/\n\n.lumina-intro p {\n  flex: 1 1 auto;\n\n  margin: 0 !important;\n  padding-top: 0.15rem;\n\n  font-size: inherit !important;\n  line-height: inherit !important;\n}\n\n\n\/* =========================================\n   INTERACTIVE GRAPHIC\n   ========================================= *\/\n\n#lumina-interactive {\n  --lumina-accent: #f05a28;\n\n  position: relative;\n  width: 100%;\n\n  margin-top: 5rem !important;\n  padding-top: 0 !important;\n}\n\n\n\/* Rocket image *\/\n\n#lumina-interactive img {\n  display: block;\n\n  width: 100%;\n  height: auto;\n\n  filter: drop-shadow(\n    0 18px 24px rgba(0, 0, 0, 0.09)\n  );\n}\n\n\n\/* =========================================\n   INTERACTIVE ELEMENTS\n   ========================================= *\/\n\n#lumina-interactive button,\n#lumina-interactive [role=\"button\"] {\n  transition:\n    transform 0.2s ease,\n    opacity 0.2s ease,\n    box-shadow 0.2s ease;\n}\n\n\n#lumina-interactive button:focus-visible,\n#lumina-interactive [role=\"button\"]:focus-visible {\n  outline: 2px solid var(--lumina-accent);\n  outline-offset: 4px;\n}\n\n\n\/* =========================================\n   INFO CARDS\n   ========================================= *\/\n\n#lumina-interactive .hyend-interactive-card,\n#lumina-interactive .interactive-card,\n#lumina-interactive .info-card {\n  position: relative;\n  overflow: hidden;\n\n  padding: 1.15rem 1.3rem;\n\n  color: #ffffff;\n\n  background: linear-gradient(\n    145deg,\n    rgba(25, 28, 32, 0.96),\n    rgba(12, 14, 17, 0.97)\n  );\n\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n\n  box-shadow:\n    0 18px 50px rgba(0, 0, 0, 0.22),\n    0 4px 12px rgba(0, 0, 0, 0.12),\n    inset 0 1px 0 rgba(255, 255, 255, 0.07);\n\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n\n  animation: lumina-card-in 0.25s ease-out;\n}\n\n\n\/* Orange accent line *\/\n\n#lumina-interactive .hyend-interactive-card::before,\n#lumina-interactive .interactive-card::before,\n#lumina-interactive .info-card::before {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  width: 42px;\n  height: 2px;\n\n  background: var(--lumina-accent);\n}\n\n\n\/* Card title *\/\n\n#lumina-interactive .hyend-interactive-card h3,\n#lumina-interactive .interactive-card h3,\n#lumina-interactive .info-card h3 {\n  margin: 0 0 0.5rem;\n\n  color: #ffffff;\n\n  font-size: inherit !important;\n  font-weight: 650;\n  line-height: 1.25;\n  letter-spacing: 0.01em;\n}\n\n\n\/* Card text *\/\n\n#lumina-interactive .hyend-interactive-card p,\n#lumina-interactive .interactive-card p,\n#lumina-interactive .info-card p {\n  margin: 0;\n\n  color: rgba(255, 255, 255, 0.74);\n\n  font-size: inherit !important;\n  line-height: 1.55;\n}\n\n\n\/* =========================================\n   CARD ANIMATION\n   ========================================= *\/\n\n@keyframes lumina-card-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px) scale(0.985);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n\n\/* =========================================\n   TABLET\n   ========================================= *\/\n\n@media (max-width: 768px) {\n  .lumina-intro {\n    gap: 1.5rem;\n  }\n\n  .lumina-intro-logo-wrapper {\n    width: 120px;\n  }\n\n  #lumina-interactive {\n    margin-top: 4rem !important;\n  }\n}\n\n\n\/* =========================================\n   MOBILE\n   ========================================= *\/\n\n@media (max-width: 600px) {\n  .lumina-intro {\n    flex-direction: column;\n    align-items: center;\n\n    gap: 1.25rem;\n  }\n\n  .lumina-intro-logo-wrapper {\n    width: 100px;\n  }\n\n  .lumina-intro p {\n    width: 100%;\n    padding-top: 0;\n\n    text-align: left;\n  }\n\n  #lumina-interactive {\n    margin-top: 3.5rem !important;\n  }\n}\n\n\n\/* =========================================\n   REDUCED MOTION\n   ========================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n  #lumina-interactive *,\n  #lumina-interactive *::before,\n  #lumina-interactive *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction initLuminaInteractiveGraphic() {\n  if (!window.HyendInteractiveImage) {\n    setTimeout(initLuminaInteractiveGraphic, 100);\n    return;\n  }\n\n  new window.HyendInteractiveImage(\"#lumina-interactive\", {\n    image: \"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/Lumina_transparent.png\",\n\n    alt: \"Lumina rocket\",\n\n    cardMaxWidth: 400,\n    maxConnectorAngle: 65,\n\n    items: [\n      {\n        title: \"Nosecone\",\n        text: \"The GFRP nosecone combines low aerodynamic drag with RF transparency for the payloads inside. Its illuminated LED tip can indicate vehicle status.\",\n        point: { x: 5.9, y: 8.2 },\n        box: { x: 18, y: 1, edge: \"top\" }\n      },\n\n      {\n        title: \"Payload\",\n        text: \"The payload section houses experiments and external payload systems, including the FROG experiment by KSat and the ROCKIT telemetry payload.\",\n        point: { x: 12.5, y: 13.5 },\n        box: { x: 50, y: 3, edge: \"top\" }\n      },\n\n      {\n        title: \"Battery Pack\",\n        text: \"The custom-developed power unit uses 10 Li-ion cells in a compact 5s2p configuration. It provides a voltage range of 12.1\u201321 V and a capacity of 5900 mAh.\",\n        point: { x: 17.8, y: 18.5 },\n        box: { x: 52, y: 6, edge: \"top\" }\n      },\n\n      {\n        title: \"Recovery Section\",\n        text: \"This section houses the two-stage recovery system with drogue and main parachutes. Both parachutes are stored inside the rocket before being deployed for controlled descent.\",\n        point: { x: 23.3, y: 23.9 },\n        box: { x: 63, y: 4, edge: \"top\" }\n      },\n\n      {\n        title: \"Avionics System\",\n        text: \"The avionics section combines custom-developed electronics with the mandatory COTS CATS Vega flight computer. It handles parachute deployment, telemetry, sensor readout, and system monitoring.\",\n        point: { x: 29.1, y: 30.0 },\n        box: { x: 25, y: 35, edge: \"bottom\" }\n      },\n\n      {\n        title: \"Helium Tank\",\n        text: \"The high-pressure tank stores pressurization gas at 300 bar consisting of a mixture of Helium and Nitrogen. It pressurizes the nitrous oxide and ethanol tanks, enabling controlled propellant feed to the engine.\",\n        point: { x: 36.5, y: 36.2 },\n        box: { x: 70, y: 8, edge: \"top\" }\n      },\n\n      {\n        title: \"Ethanol Tank\",\n        text: \"The ethanol tank stores the rocket\u2019s fuel in a Type IV carbon fiber overwrapped pressure vessel. Its lightweight composite design reduces mass while withstanding the required operating pressure.\",\n        point: { x: 51.7, y: 49.8 },\n        box: { x: 18, y: 57, edge: \"bottom\" }\n      },\n\n      {\n        title: \"Nitrous Oxide Tank\",\n        text: \"The nitrous oxide tank stores the oxidizer and is a structural part of the rocket\u2019s hull segment. This in turn requires a bypass for wires running to the engine section.\",\n        point: { x: 66.4, y: 64.0 },\n        box: { x: 36, y: 73, edge: \"bottom\" }\n      },\n\n      {\n        title: \"RadAx Connector\",\n        text: \"The RadAx connector joins rocket sections with a compact radial-axial interface. Its angled screw connection transfers both radial and axial loads while enabling fast assembly and disassembly.\",\n        point: { x: 72.5, y: 70.0 },\n        box: { x: 14, y: 78, edge: \"bottom\" }\n      },\n\n      {\n        title: \"Fluid System\",\n        text: \"The fluid system routes helium, ethanol, and nitrous oxide through the rocket. It includes pressure regulation, emergency dump valves, and pyrotechnic valves for fueling and flight operation.\",\n        point: { x: 76.9, y: 73.5 },\n        box: { x: 45, y: 86, edge: \"bottom\" }\n      },\n\n      {\n        title: \"Fin Can\",\n        text: \"The fin can integrates the rear stabilizing fins into the engine section. It provides aerodynamic stability during ascent and supports the mechanical integration of the aft rocket structure.\",\n        point: { x: 85.4, y: 89.4 },\n        box: { x: 20, y: 96, edge: \"bottom\" }\n      },\n\n      {\n        title: \"Engine\",\n        text: \"The engine is a liquid rocket engine using nitrous oxide and ethanol as propellants. Its ablatively cooled combustion chamber is built with a carbon fiber overwrap.\",\n        point: { x: 91.8, y: 86.5 },\n        box: { x: 28, y: 82, edge: \"bottom\" }\n      }\n    ]\n  });\n}\n\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\n    \"DOMContentLoaded\",\n    initLuminaInteractiveGraphic\n  );\n} else {\n  initLuminaInteractiveGraphic();\n}\n<\/script>\n\n<section class=\"lumina-intro\">\n  <div class=\"lumina-intro-logo-wrapper\">\n    <img decoding=\"async\"\n      class=\"lumina-intro-logo\"\n      src=\"https:\/\/hyend.de\/wp-content\/uploads\/2025\/11\/Lumina_Patch.png\"\n      alt=\"LUMINA project patch\"\n    >\n  <\/div>\n\n  <p>\n    <strong>LUMINA<\/strong> is our first liquid-propelled sounding rocket and our contribution to EuRoC 2025. It marks an important step towards more advanced student-built launch vehicles at HyEnD, bringing together a liquid engine using nitrous oxide and ethanol, a pressure-fed fluid system, composite overwrapped pressure vessels, custom avionics, and a two-stage recovery system. At the same time, LUMINA stays true to one of our defining engineering principles: lightweight construction.\n  <\/p>\n<\/section>\n\n<div\n  id=\"lumina-interactive\"\n  aria-label=\"Interactive overview of the LUMINA rocket\"\n><\/div>\n\n\n\n<h3 class=\"hyend-spec-title\">Technical data<\/h3>\n\n\n\n<style data-wp-block-html=\"css\">\n.hyend-spec-table {\n    --hyend-orange: #FF8200;\n    --hyend-bg: #23262B;\n    --hyend-line: rgba(255, 255, 255, 0.12);\n    --hyend-text: #ffffff;\n    --hyend-muted: rgba(255, 255, 255, 0.66);\n\n    width: 100%;\n    max-width: 760px;\n    margin: 0 auto !important;\n    padding: 0 !important;\n    background: var(--hyend-bg);\n    color: var(--hyend-text);\n    border-top: 1px solid var(--hyend-line);\n    border-bottom: 1px solid var(--hyend-line);\n}\n\n.hyend-spec-row {\n    display: grid;\n    grid-template-columns: minmax(180px, 38%) 1fr;\n    min-height: 58px;\n    margin: 0 !important;\n    padding: 0 !important;\n    border-bottom: 1px solid var(--hyend-line);\n    transition: background 0.18s ease;\n}\n\n.hyend-spec-row:last-child {\n    border-bottom: 0;\n}\n\n.hyend-spec-row:hover {\n    background: rgba(255, 130, 0, 0.06);\n}\n\n.hyend-spec-row > div {\n    min-height: 58px;\n    margin: 0 !important;\n    padding: 0 18px !important;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n}\n\n.hyend-spec-row > div:first-child {\n    position: relative;\n    color: var(--hyend-muted);\n    font-weight: 600;\n    border-right: 1px solid var(--hyend-line);\n}\n\n.hyend-spec-row > div:first-child::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 12px;\n    bottom: 12px;\n    width: 3px;\n    background: var(--hyend-orange);\n    opacity: 0;\n    transition: opacity 0.18s ease;\n}\n\n.hyend-spec-row:hover > div:first-child::before {\n    opacity: 1;\n}\n\n.hyend-spec-row > div:last-child {\n    color: var(--hyend-text);\n    font-weight: 700;\n}\n\n@media (max-width: 600px) {\n    .hyend-spec-row {\n        grid-template-columns: 1fr;\n        min-height: auto;\n    }\n\n    .hyend-spec-row > div {\n        min-height: auto;\n        padding: 10px 18px !important;\n    }\n\n    .hyend-spec-row > div:first-child {\n        border-right: 0;\n        padding-bottom: 2px !important;\n    }\n\n    .hyend-spec-row > div:last-child {\n        padding-top: 2px !important;\n    }\n}\n<\/style>\n\n<section class=\"hyend-spec-table\">\n  <div class=\"hyend-spec-row\">\n    <div>Thrust<\/div>\n    <div>1000 N<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Apogee Reached (Goal 3000 m)<\/div>\n    <div>2906 m<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Propellants<\/div>\n    <div>Ethanol + Nitrous Oxide<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Pressurant<\/div>\n    <div>2\/3 Helium + 1\/3 Nitrogen<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Length<\/div>\n    <div>3.23 m<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Diameter<\/div>\n    <div>120 mm<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Propellant Mass<\/div>\n    <div>3.3 kg<\/div>\n  <\/div>\n  <div class=\"hyend-spec-row\">\n    <div>Dry Mass<\/div>\n    <div>17.4 kg<\/div>\n  <\/div>\n<\/section>\n\n\n\n<p style=\"margin-top:80px; font-size:inherit;\">\n  Furthermore, LUMINA introduced several new technologies and design approaches to HyEnD. From distributed avionics to liquid propulsion and lightweight composite tanks, the vehicle served as a testbed for systems that continue to shape our current developments.\n<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==================================================\n   HYEND \u2013 LUMINA FEATURES\n================================================== *\/\n\n.hyend-rocket-stats {\n  --hyend-orange: #ff8200;\n  --hyend-line: rgba(255, 255, 255, 0.14);\n  --hyend-soft-line: rgba(255, 255, 255, 0.08);\n  --hyend-soft-bg: rgba(255, 255, 255, 0.025);\n\n  position: relative;\n  width: 100%;\n  padding:\n    clamp(52px, 7vw, 75px)\n    clamp(16px, 3vw, 28px)\n    clamp(65px, 8vw, 90px);\n\n  overflow: hidden;\n  background: transparent;\n  font-family: inherit;\n}\n\n.hyend-rocket-stats,\n.hyend-rocket-stats * {\n  box-sizing: border-box;\n}\n\n\/* ==================================================\n   HEADER\n================================================== *\/\n\n.hyend-stats-header {\n  width: min(100%, 820px);\n  margin: 0 auto clamp(38px, 6vw, 60px);\n  text-align: center;\n}\n\n.hyend-stats-header h2 {\n  margin: 0;\n  color: inherit;\n\n  font-size: inherit !important;\n  line-height: 1.08;\n  font-weight: 900;\n\n  text-align: center !important;\n  text-wrap: balance;\n}\n\n\/* ==================================================\n   LIST\n================================================== *\/\n\n.hyend-stats-list {\n  width: min(100%, 1240px);\n  margin: 0 auto;\n\n  border-bottom: 1px solid var(--hyend-line);\n}\n\n\/* ==================================================\n   ITEM\n================================================== *\/\n\n.hyend-stat-item {\n  display: grid;\n  grid-template-columns: 310px minmax(0, 1fr);\n\n  gap: clamp(32px, 5vw, 70px);\n\n  align-items: center;\n\n  padding: clamp(42px, 5vw, 58px) 0;\n\n  color: inherit;\n\n  border-top: 1px solid var(--hyend-line);\n}\n\n\/* ==================================================\n   REVEAL ANIMATION\n================================================== *\/\n\n.hyend-rocket-stats.is-enhanced .hyend-stat-item {\n  opacity: 0;\n\n  transform: translateY(24px);\n\n  transition:\n    opacity 0.65s ease,\n    transform 0.65s ease;\n}\n\n.hyend-rocket-stats.is-enhanced .hyend-stat-item.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* ==================================================\n   IMAGE FRAME\n================================================== *\/\n\n.hyend-stat-image-wrap {\n  position: relative;\n\n  width: 100%;\n  min-width: 0;\n\n  padding: clamp(10px, 1.2vw, 14px);\n\n  overflow: hidden;\n\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0.045),\n    rgba(255, 255, 255, 0.015)\n  );\n\n  border: 1px solid var(--hyend-soft-line);\n\n  box-shadow:\n    0 14px 30px rgba(0, 0, 0, 0.16),\n    inset 0 1px 0 rgba(255, 255, 255, 0.03);\n}\n\n\/* Orange accent line *\/\n\n.hyend-stat-image-wrap::before {\n  content: \"\";\n\n  position: absolute;\n  top: -1px;\n  left: -1px;\n\n  z-index: 3;\n\n  width: clamp(42px, 5vw, 54px);\n  height: 3px;\n\n  background: var(--hyend-orange);\n}\n\n\/* Inner frame *\/\n\n.hyend-stat-image-wrap::after {\n  content: \"\";\n\n  position: absolute;\n  inset: 7px;\n\n  z-index: 2;\n\n  border: 1px solid rgba(255, 255, 255, 0.05);\n\n  pointer-events: none;\n}\n\n\/* ==================================================\n   IMAGE\n================================================== *\/\n\n.hyend-stat-image {\n  position: relative;\n\n  width: 100%;\n  height: auto;\n\n  aspect-ratio: 1 \/ 1;\n\n  overflow: hidden;\n\n  background: var(--hyend-soft-bg);\n}\n\n.hyend-stat-image img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center;\n\n  transform: scale(1);\n\n  transition: transform 0.45s ease;\n}\n\n\/* Subtle overlay *\/\n\n.hyend-stat-image::after {\n  content: \"\";\n\n  position: absolute;\n  inset: 0;\n\n  z-index: 1;\n\n  background: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.01),\n    rgba(0, 0, 0, 0.06)\n  );\n\n  pointer-events: none;\n}\n\n\/* ==================================================\n   SOURCE\n================================================== *\/\n\n.hyend-stat-source,\n.hyend-stat-source:link,\n.hyend-stat-source:visited {\n  position: absolute !important;\n  right: 4px !important;\n  bottom: 4px !important;\n  z-index: 5;\n\n  display: block !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  \/* Kein Hintergrund *\/\n  background: transparent !important;\n  background-color: transparent !important;\n\n  \/* Sehr dezente Schrift *\/\n  color: rgba(255, 255, 255, 0.28) !important;\n\n  border: 0 !important;\n  border-radius: 0 !important;\n  outline: 0;\n  box-shadow: none !important;\n\n  font-family: inherit !important;\n  font-size: 8px !important;\n  line-height: 1 !important;\n  font-weight: 400 !important;\n  font-style: normal !important;\n\n  letter-spacing: 0 !important;\n\n  text-align: right !important;\n  text-decoration: none !important;\n  text-transform: none !important;\n  text-shadow: none !important;\n\n  white-space: nowrap;\n\n  opacity: 1 !important;\n\n  transition: color 0.2s ease;\n}\n\n.hyend-stat-source:hover {\n  color: rgba(255, 255, 255, 0.5) !important;\n  background: transparent !important;\n}\n\n\/* Source link *\/\n\n.hyend-stat-source a,\n.hyend-stat-source a:link,\n.hyend-stat-source a:visited {\n  color: rgba(0, 0, 0, 0.38) !important;\n\n  background: transparent !important;\n\n  font-family: inherit !important;\n  font-size: inherit !important;\n  font-weight: 400 !important;\n\n  letter-spacing: 0 !important;\n\n  text-decoration: none !important;\n  text-transform: none !important;\n}\n\n.hyend-stat-source a:hover {\n  color: rgba(0, 0, 0, 0.65) !important;\n  text-decoration: none !important;\n}\n\n.hyend-stat-source a:focus-visible {\n  color: rgba(0, 0, 0, 0.7) !important;\n\n  outline: 1px solid rgba(0, 0, 0, 0.25);\n  outline-offset: 1px;\n}\n\n\/* ==================================================\n   CONTENT\n================================================== *\/\n\n.hyend-stat-content {\n  position: relative;\n\n  width: 100%;\n  min-width: 0;\n  max-width: 680px;\n\n  color: inherit;\n\n  text-align: left !important;\n\n  transform: translateX(0);\n\n  transition: transform 0.3s ease;\n}\n\n\/* ==================================================\n   LABEL\n================================================== *\/\n\n.hyend-stat-label {\n  display: inline-block;\n\n  margin-bottom: 10px;\n\n  color: var(--hyend-orange);\n\n  font-size: inherit !important;\n  line-height: 1.25;\n\n  font-weight: 700;\n\n  letter-spacing: 0.06em;\n\n  text-align: left !important;\n  text-transform: uppercase;\n\n  transition: letter-spacing 0.3s ease;\n}\n\n\/* ==================================================\n   TITLE\n================================================== *\/\n\n.hyend-stat-content h3 {\n  margin: 0 0 16px;\n\n  color: inherit;\n\n  font-size: inherit !important;\n  line-height: 1.12;\n\n  font-weight: 900;\n\n  overflow-wrap: break-word;\n\n  text-align: left !important;\n  text-wrap: balance;\n\n  transition: color 0.3s ease;\n}\n\n\/* ==================================================\n   TEXT\n================================================== *\/\n\n.hyend-stat-content p {\n  margin: 0;\n\n  color: inherit;\n\n  font-size: inherit !important;\n  line-height: 1.65;\n\n  opacity: 0.78;\n\n  overflow-wrap: break-word;\n\n  text-align: left !important;\n}\n\n\/* ==================================================\n   EXPAND \/ COLLAPSE\n================================================== *\/\n\n.hyend-stat-item.has-overflow .hyend-stat-content {\n  cursor: pointer;\n}\n\n.hyend-stat-item.has-overflow .hyend-stat-content p {\n  overflow: hidden;\n\n  transition:\n    max-height 0.55s ease,\n    opacity 0.3s ease;\n}\n\n.hyend-stat-item.has-overflow:not(.is-expanded)\n.hyend-stat-content p {\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0%,\n    #000 calc(100% - 72px),\n    transparent 100%\n  );\n\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0%,\n    #000 calc(100% - 72px),\n    transparent 100%\n  );\n}\n\n.hyend-stat-item.is-expanded\n.hyend-stat-content p {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n\/* ==================================================\n   TOGGLE BUTTON\n================================================== *\/\n\n.hyend-stat-toggle {\n  display: none;\n\n  align-items: center;\n\n  gap: 0.45rem;\n\n  margin-top: 14px;\n\n  padding: 0.35rem 0;\n\n  border: 0;\n\n  background: transparent;\n\n  color: var(--hyend-orange);\n\n  font: inherit;\n\n  font-size: inherit !important;\n  line-height: 1.2;\n\n  font-weight: 800;\n\n  letter-spacing: 0.08em;\n\n  text-transform: uppercase;\n\n  cursor: pointer;\n}\n\n.hyend-stat-item.has-overflow\n.hyend-stat-toggle {\n  display: inline-flex;\n}\n\n.hyend-stat-toggle::after {\n  content: \"\u2193\";\n\n  font-size: inherit !important;\n  line-height: 1;\n\n  transition: transform 0.3s ease;\n}\n\n.hyend-stat-item.is-expanded\n.hyend-stat-toggle::after {\n  transform: rotate(180deg);\n}\n\n.hyend-stat-toggle:focus-visible {\n  outline: 2px solid var(--hyend-orange);\n  outline-offset: 4px;\n}\n\n\/* ==================================================\n   HOVER\n================================================== *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .hyend-stat-item:hover\n  .hyend-stat-image img {\n    transform: scale(1.025);\n  }\n\n  .hyend-stat-content:hover {\n    transform: translateX(4px);\n  }\n\n  .hyend-stat-content:hover p {\n    opacity: 0.9;\n  }\n\n  .hyend-stat-content:hover\n  .hyend-stat-label {\n    letter-spacing: 0.075em;\n  }\n\n  .hyend-stat-content:hover h3 {\n    color: var(--hyend-orange);\n  }\n}\n\n\/* ==================================================\n   RESPONSIVE \u2013 TABLET\n================================================== *\/\n\n@media (max-width: 1050px) {\n\n  .hyend-stat-item {\n    grid-template-columns:\n      260px\n      minmax(0, 1fr);\n\n    gap: clamp(28px, 4vw, 42px);\n  }\n}\n\n\/* ==================================================\n   RESPONSIVE \u2013 MOBILE\n================================================== *\/\n\n@media (max-width: 860px) {\n\n  .hyend-rocket-stats {\n    padding-top: 55px;\n    padding-bottom: 70px;\n  }\n\n  .hyend-stats-header {\n    margin-bottom: 42px;\n  }\n\n  .hyend-stat-item {\n    grid-template-columns: minmax(0, 1fr);\n\n    gap: 26px;\n\n    padding: 42px 0;\n  }\n\n  .hyend-stat-image-wrap,\n  .hyend-stat-content {\n    width: min(100%, 680px);\n  }\n\n  .hyend-stat-content h3 {\n    font-size: inherit !important;\n  }\n}\n\n\/* ==================================================\n   SMALL MOBILE\n================================================== *\/\n\n@media (max-width: 520px) {\n\n  .hyend-rocket-stats {\n    padding-right: 16px;\n    padding-left: 16px;\n  }\n\n  .hyend-stats-header h2 {\n    font-size: inherit !important;\n  }\n\n  .hyend-stat-item {\n    gap: 22px;\n\n    padding: 34px 0;\n  }\n\n  .hyend-stat-image-wrap {\n    padding: 10px;\n  }\n\n  .hyend-stat-image-wrap::after {\n    inset: 5px;\n  }\n\n  .hyend-stat-source {\n    right: 3px !important;\n    bottom: 3px !important;\n\n    font-size: inherit !important;\n  }\n}\n\n@media (max-width: 430px) {\n\n  .hyend-stat-image-wrap::before {\n    width: 42px;\n  }\n}\n\n\/* ==================================================\n   REDUCED MOTION\n================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .hyend-rocket-stats.is-enhanced\n  .hyend-stat-item {\n    opacity: 1;\n\n    transform: none;\n\n    transition: none;\n  }\n\n  .hyend-stat-image img,\n  .hyend-stat-content,\n  .hyend-stat-content h3,\n  .hyend-stat-content p,\n  .hyend-stat-label,\n  .hyend-stat-toggle::after,\n  .hyend-stat-source a {\n    transition: none;\n  }\n\n  .hyend-stat-content:hover {\n    transform: none;\n  }\n}\n\n\/* ==================================================\n   PAYLOAD LOGO BOX\n================================================== *\/\n\n.hyend-stat-image--payload-logos {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  gap: clamp(18px, 3vw, 28px);\n  padding: clamp(20px, 4vw, 32px);\n\n  background: #000;\n}\n\n\/* Kein normales Bild-Overlay *\/\n\n.hyend-stat-image--payload-logos::after {\n  display: none;\n}\n\n\n\/* ==================================================\n   LOGO LINKS\n================================================== *\/\n\n.hyend-stat-logo-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n\n  text-decoration: none;\n  outline: none;\n}\n\n\n\/* ==================================================\n   LOGO BASE\n================================================== *\/\n\n.hyend-stat-image--payload-logos\n.hyend-stat-logo-link img {\n  display: block;\n\n  width: auto;\n  height: auto;\n\n  object-fit: contain;\n\n  opacity: 0.88;\n\n  transform: translateY(0) scale(1);\n\n  transition:\n    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),\n    opacity 0.4s ease,\n    filter 0.4s ease;\n\n  will-change: transform;\n}\n\n\n\/* ==================================================\n   ROCKIT \u2013 INDIVIDUAL SIZE\n================================================== *\/\n\n.hyend-stat-logo-link--rockit img {\n  width: 88% !important;\n  max-width: 270px !important;\n\n  height: auto !important;\n  max-height: 95px !important;\n}\n\n\n\/* ==================================================\n   KSAT \u2013 INDIVIDUAL SIZE\n================================================== *\/\n\n.hyend-stat-logo-link--ksat img {\n  width: 43% !important;\n  max-width: 125px !important;\n\n  height: auto !important;\n  max-height: 125px !important;\n}\n\n\n\/* ==================================================\n   IMPORTANT:\n   DISABLE NORMAL ARTICLE IMAGE HOVER\n   FOR PAYLOAD LOGOS\n================================================== *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  \/*\n     Verhindert, dass BEIDE Logos reagieren,\n     sobald man nur \u00fcber den gesamten Artikel f\u00e4hrt.\n  *\/\n\n  .hyend-stat-item:hover\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link img {\n    transform: translateY(0) scale(1);\n    opacity: 0.88;\n    filter: none;\n  }\n\n\n  \/* ==================================================\n     ROCKIT HOVER\n     Nur ROCKIT reagiert\n  ================================================== *\/\n\n  .hyend-stat-item:hover\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link--rockit:hover img {\n    transform:\n      translateY(-2px)\n      scale(1.035);\n\n    opacity: 1;\n\n    filter:\n      brightness(1.08);\n  }\n\n\n  \/* ==================================================\n     KSAT HOVER\n     Nur KSAT reagiert\n  ================================================== *\/\n\n  .hyend-stat-item:hover\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link--ksat:hover img {\n    transform:\n      translateY(-3px)\n      scale(1.055);\n\n    opacity: 1;\n\n    filter:\n      brightness(1.06);\n  }\n}\n\n\n\/* ==================================================\n   FOCUS\n================================================== *\/\n\n.hyend-stat-logo-link:focus-visible {\n  outline: 1px solid rgba(255, 130, 0, 0.65);\n  outline-offset: 5px;\n}\n\n\n\/* ==================================================\n   MOBILE\n================================================== *\/\n\n@media (max-width: 520px) {\n\n  .hyend-stat-image--payload-logos {\n    gap: 16px;\n    padding: 18px;\n  }\n\n  .hyend-stat-logo-link--rockit img {\n    width: 84% !important;\n    max-width: 230px !important;\n    max-height: 82px !important;\n  }\n\n  .hyend-stat-logo-link--ksat img {\n    width: 40% !important;\n    max-width: 110px !important;\n    max-height: 110px !important;\n  }\n}\n\n\n\/* ==================================================\n   REDUCED MOTION\n================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link img {\n    transition: none;\n  }\n\n  .hyend-stat-item:hover\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link img,\n\n  .hyend-stat-item:hover\n  .hyend-stat-image--payload-logos\n  .hyend-stat-logo-link:hover img {\n    transform: none;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \"use strict\";\n\n  function initHyendFeatures(section) {\n    if (\n      section.dataset.expandableInitialized ===\n      \"true\"\n    ) {\n      return;\n    }\n\n    section.dataset.expandableInitialized =\n      \"true\";\n\n    section.classList.add(\"is-enhanced\");\n\n    var items = Array.from(\n      section.querySelectorAll(\n        \".hyend-stat-item\"\n      )\n    );\n\n    var measurements = [];\n    var resizeTimer;\n\n    items.forEach(function (item, index) {\n      var image = item.querySelector(\n        \".hyend-stat-image\"\n      );\n\n      var imageFrame =\n        item.querySelector(\n          \".hyend-stat-image-wrap\"\n        ) || image;\n\n      var content = item.querySelector(\n        \".hyend-stat-content\"\n      );\n\n      var paragraph =\n        content &&\n        Array.from(\n          content.querySelectorAll(\"p\")\n        ).find(function (element) {\n          return (\n            element.textContent.trim().length >\n            0\n          );\n        });\n\n      if (\n        !image ||\n        !imageFrame ||\n        !content ||\n        !paragraph\n      ) {\n        item.classList.add(\"is-visible\");\n        return;\n      }\n\n      var sectionKey =\n        section.id || \"section\";\n\n      var paragraphId =\n        \"hyend-stat-text-\" +\n        sectionKey +\n        \"-\" +\n        (index + 1);\n\n      paragraph.id = paragraphId;\n\n      var button =\n        document.createElement(\"button\");\n\n      button.type = \"button\";\n      button.className =\n        \"hyend-stat-toggle\";\n\n      button.textContent = \"Read more\";\n\n      button.setAttribute(\n        \"aria-controls\",\n        paragraphId\n      );\n\n      button.setAttribute(\n        \"aria-expanded\",\n        \"false\"\n      );\n\n      content.appendChild(button);\n\n      function getButtonSpace() {\n        var styles =\n          window.getComputedStyle(button);\n\n        var marginTop =\n          parseFloat(styles.marginTop) || 0;\n\n        var marginBottom =\n          parseFloat(styles.marginBottom) || 0;\n\n        return (\n          button.offsetHeight +\n          marginTop +\n          marginBottom\n        );\n      }\n\n      function getCollapsedParagraphHeight() {\n        var paragraphStyles =\n          window.getComputedStyle(paragraph);\n\n        var lineHeight =\n          parseFloat(\n            paragraphStyles.lineHeight\n          ) || 27;\n\n        if (window.innerWidth <= 860) {\n          return lineHeight * 6;\n        }\n\n        var imageHeight =\n          imageFrame.getBoundingClientRect()\n            .height;\n\n        var contentTop =\n          content.getBoundingClientRect().top;\n\n        var paragraphTop =\n          paragraph.getBoundingClientRect().top;\n\n        var spaceAboveParagraph =\n          paragraphTop - contentTop;\n\n        var availableHeight =\n          imageHeight -\n          spaceAboveParagraph -\n          getButtonSpace();\n\n        return Math.max(\n          lineHeight * 3,\n          availableHeight\n        );\n      }\n\n      function setExpanded(expanded) {\n        item.classList.toggle(\n          \"is-expanded\",\n          expanded\n        );\n\n        paragraph.style.maxHeight =\n          expanded\n            ? paragraph.scrollHeight + \"px\"\n            : getCollapsedParagraphHeight() +\n              \"px\";\n\n        button.setAttribute(\n          \"aria-expanded\",\n          String(expanded)\n        );\n\n        button.textContent =\n          expanded\n            ? \"Show less\"\n            : \"Read more\";\n      }\n\n      function measure() {\n        var wasExpanded =\n          item.classList.contains(\n            \"is-expanded\"\n          );\n\n        item.classList.remove(\n          \"has-overflow\",\n          \"is-expanded\"\n        );\n\n        paragraph.style.maxHeight = \"none\";\n\n        var paragraphStyles =\n          window.getComputedStyle(paragraph);\n\n        var lineHeight =\n          parseFloat(\n            paragraphStyles.lineHeight\n          ) || 27;\n\n        var hasOverflow;\n\n        if (window.innerWidth <= 860) {\n          var mobileCollapsedHeight =\n            lineHeight * 6;\n\n          hasOverflow =\n            paragraph.scrollHeight >\n            mobileCollapsedHeight + 1;\n        } else {\n          var imageHeight =\n            imageFrame.getBoundingClientRect()\n              .height;\n\n          var naturalContentHeight =\n            content.scrollHeight;\n\n          var desktopTolerance =\n            lineHeight * 2;\n\n          hasOverflow =\n            naturalContentHeight >\n            imageHeight +\n              desktopTolerance;\n        }\n\n        item.classList.toggle(\n          \"has-overflow\",\n          hasOverflow\n        );\n\n        if (!hasOverflow) {\n          paragraph.style.maxHeight = \"none\";\n\n          button.setAttribute(\n            \"aria-expanded\",\n            \"false\"\n          );\n\n          button.textContent = \"Read more\";\n\n          return;\n        }\n\n        setExpanded(wasExpanded);\n      }\n\n      function toggle() {\n        if (\n          !item.classList.contains(\n            \"has-overflow\"\n          )\n        ) {\n          return;\n        }\n\n        setExpanded(\n          !item.classList.contains(\n            \"is-expanded\"\n          )\n        );\n      }\n\n      content.addEventListener(\n        \"click\",\n        function (event) {\n          if (\n            event.target.closest(\n              \".hyend-stat-toggle, a\"\n            )\n          ) {\n            return;\n          }\n\n          toggle();\n        }\n      );\n\n      button.addEventListener(\n        \"click\",\n        function (event) {\n          event.stopPropagation();\n          toggle();\n        }\n      );\n\n      var images = Array.from(\n        image.querySelectorAll(\"img\")\n      );\n\n      images.forEach(function (img) {\n        if (!img.complete) {\n          img.addEventListener(\n            \"load\",\n            measure,\n            { once: true }\n          );\n\n          img.addEventListener(\n            \"error\",\n            measure,\n            { once: true }\n          );\n        }\n      });\n\n      measurements.push(measure);\n    });\n\n    function measureAll() {\n      measurements.forEach(\n        function (measure) {\n          measure();\n        }\n      );\n    }\n\n    if (\n      \"IntersectionObserver\" in window\n    ) {\n      var observer =\n        new IntersectionObserver(\n          function (entries) {\n            entries.forEach(\n              function (entry) {\n                if (!entry.isIntersecting) {\n                  return;\n                }\n\n                entry.target.classList.add(\n                  \"is-visible\"\n                );\n\n                observer.unobserve(\n                  entry.target\n                );\n              }\n            );\n          },\n          {\n            threshold: 0.12\n          }\n        );\n\n      items.forEach(function (item) {\n        observer.observe(item);\n      });\n    } else {\n      items.forEach(function (item) {\n        item.classList.add(\"is-visible\");\n      });\n    }\n\n    window.addEventListener(\n      \"resize\",\n      function () {\n        window.clearTimeout(resizeTimer);\n\n        resizeTimer =\n          window.setTimeout(\n            measureAll,\n            150\n          );\n      }\n    );\n\n    requestAnimationFrame(function () {\n      requestAnimationFrame(measureAll);\n    });\n\n    if (\n      document.fonts &&\n      document.fonts.ready\n    ) {\n      document.fonts.ready.then(\n        measureAll\n      );\n    }\n\n    window.addEventListener(\n      \"load\",\n      measureAll,\n      { once: true }\n    );\n  }\n\n  function init() {\n    document\n      .querySelectorAll(\n        \".hyend-rocket-stats\"\n      )\n      .forEach(initHyendFeatures);\n  }\n\n  if (\n    document.readyState === \"loading\"\n  ) {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      init,\n      { once: true }\n    );\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n<section id=\"lumina-features\" class=\"hyend-rocket-stats\" aria-labelledby=\"lumina-features-title\">\n\n  <header class=\"hyend-stats-header\">\n    <h2 id=\"lumina-features-title\">\n      LUMINA Features\n    <\/h2>\n  <\/header>\n\n  <div class=\"hyend-stats-list\">\n\n    <article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/ST_Nosecone2-scaled-e1787459273857.jpg\" alt=\"LED-illuminated nose tip\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Identity\n        <\/span>\n\n        <h3>\n          LED Status Nose Tip\n        <\/h3>\n\n        <p>\n          A new feature of the rocket is its LED-illuminated\n          tip. It serves as an integrated status indicator and\n          is also capable of transmitting short messages in\n          Morse code, while playfully reflecting LUMINA\u2019s\n          name. Since the LEDs generate a considerable amount\n          of heat, a dedicated cooling system is required,\n          proving that even a visual feature can present an\n          engineering challenge.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/Avionic_Platine1-scaled-e1787693793612.jpg\" alt=\"Distributed avionics electronics\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Avionics\n        <\/span>\n\n        <h3>\n          Distributed CAN Architecture\n        <\/h3>\n\n        <p>\n          LUMINA served as a testbed for BLAST\u2019s newly formed avionics team. It represents a major leap in avionics fidelity compared with earlier rockets, while still being only a first step toward the avionics suite planned for our upcoming rockets. Its\n          distributed architecture comprises a combined\n          PCDU\/FCC board and three sensor boards interconnected\n          via CAN. It also includes HyEnD\u2019s first Rust-based\n          flight software. Together, these developments laid\n          the foundation for BLAST\u2019s current avionics platform.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/Lumina_Chute_cut-e1787521475938.png\" alt=\"Parachute ejection system\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Recovery\n        <\/span>\n\n        <h3>\n          Spring-Loaded Recovery System\n        <\/h3>\n\n        <p>\n          LUMINA features a redesigned recovery deployment\n          system with a spring-loaded hatch, pyrotechnic\n          release mechanisms, and a dual-stage recovery\n          sequence. The hatch itself acts as a pilot drag body,\n          extracting the in-house developed HyCube drogue\n          parachute, followed by the 84&#8243; main parachute. The\n          system enables reliable parachute extraction while\n          reducing structural loads and decreasing drift\n          during descent. Together, the drogue and main\n          parachutes decelerate the rocket to a safe touchdown\n          velocity of approximately 6 m\/s.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n  <div class=\"hyend-stat-image-wrap\">\n    <div class=\"hyend-stat-image hyend-stat-image--payload-logos\">\n\n      <a class=\"hyend-stat-logo-link hyend-stat-logo-link--rockit\" href=\"https:\/\/rockit.ing\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open ROCKIT logo\">\n        <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2025\/05\/ROCKIT_Logo_Light-1-scaled.png\" alt=\"ROCKIT logo\" loading=\"lazy\" decoding=\"async\">\n      <\/a>\n\n      <a class=\"hyend-stat-logo-link hyend-stat-logo-link--ksat\" href=\"https:\/\/ksat-stuttgart.de\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Open KSat logo\">\n        <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2021\/01\/ksat.png\" alt=\"KSat logo\" loading=\"lazy\" decoding=\"async\">\n      <\/a>\n\n    <\/div>\n  <\/div>\n\n  <div class=\"hyend-stat-content\">\n\n    <span class=\"hyend-stat-label\">\n      Payload\n    <\/span>\n\n    <h3>\n      Scientific Payload Platform\n    <\/h3>\n\n    <p>\n  LUMINA carries two scientific payloads provided by our friends at\n  <a href=\"https:\/\/ksat-stuttgart.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">KSat<\/a>\n  and\n  <a href=\"https:\/\/rockit.ing\/\" target=\"_blank\" rel=\"noopener noreferrer\">ROCKIT<\/a>.\n  KSat contributes the FROG (Ferrofluid Response Observation under G-Forces)\n  microgravity experiment, which investigates the behavior of ferrofluids under\n  high-g acceleration and microgravity conditions. The second payload is provided\n  by ROCKIT and consists of the telemetry and avionics unit developed for their\n  lander, allowing it to gather valuable flight data during LUMINA\u2019s mission.\n  Together, both payloads turn LUMINA into a platform for scientific experimentation\n  and technology demonstration.\n<\/p>\n    <p><\/p>\n\n  <\/div>\n\n<\/article>\n\n<article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/fluid_system-scaled.jpg\" alt=\"Externally pressurized feed system\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Feed System\n        <\/span>\n\n        <h3>\n          Through-Tank Ethanol Feed\n        <\/h3>\n\n        <p>\n          LUMINA\u2019s nitrous oxide tank forms a structural part of the rocket itself, meaning the ethanol feed line must pass directly through it. The design takes inspiration from a Swagelok heat-exchanger tee. An 8 mm-to-12 mm bored-through fitting was adapted to interface with a 12 mm tee. The resulting solution is simple to integrate and relies entirely on commercially available off-the-shelf (COTS) components. Its main drawback, however, is destructive disassembly, as the pipe must be cut to remove the assembly. This will be addressed in future rockets using push-in fittings.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/Flu_PR_Patent_inv.png\" alt=\"Commercial pressure regulator patent drawing\" loading=\"lazy\" decoding=\"async\">\n\n          <a class=\"hyend-stat-source\" href=\"https:\/\/patentimages.storage.googleapis.com\/21\/a7\/6c\/3e71daf3483e8e\/US20210132639A1.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Source: US Patent 11,640,181 B2\">\n            Source: US 11,640,181 B2\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Pressurization\n        <\/span>\n\n        <h3>\n          COTS Pressure Regulation\n        <\/h3>\n\n        <p>\n          With ethanol, LUMINA is the first HyEnD rocket fueled by a non-self-pressurizing propellant, requiring a pressure-fed system and pressure regulator. As this is the first regulator used on a HyEnD rocket, a commercial off-the-shelf solution was chosen. Originally developed for extreme-pressure applications, it provides precise helium pressure control while reducing complexity and increasing reliability.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n      <div class=\"hyend-stat-image-wrap\">\n        <div class=\"hyend-stat-image\">\n\n          <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/ST_prototyp_tanks-scaled.jpg\" alt=\"Type IV ethanol tank with inflatable liner\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n      <\/div>\n\n      <div class=\"hyend-stat-content\">\n\n        <span class=\"hyend-stat-label\">\n          Fuel Tank\n        <\/span>\n\n        <h3>\n          Type IV Composite Fuel Tank\n        <\/h3>\n\n        <p>\n          In rocketry, every kilogram matters, and the fluid\n          system, particularly the tanks, accounts for a\n          significant share of the vehicle\u2019s mass. Therefore\n          LUMINA employs a lightweight Type IV composite\n          pressure vessel for ethanol storage. By combining a\n          polymer liner with a carbon-fiber overwrap, the tank\n          significantly reduces structural mass while\n          maintaining the required pressure capability.\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n<article class=\"hyend-stat-item\">\n\n  <div class=\"hyend-stat-image-wrap\">\n    <div class=\"hyend-stat-image\">\n\n      <img src=\"https:\/\/hyend.de\/wp-content\/uploads\/2026\/08\/TW_big_plug-scaled.jpg\" alt=\"Liquid rocket engine with CFRP overwrap\" loading=\"lazy\" decoding=\"async\">\n\n    <\/div>\n  <\/div>\n\n  <div class=\"hyend-stat-content\">\n\n    <span class=\"hyend-stat-label\">\n      Propulsion\n    <\/span>\n\n    <h3>\n      CFRP-Overwrapped Liquid Engine\n    <\/h3>\n\n    <p>\n      LUMINA marks HyEnD\u2019s transition to liquid propulsion.\n      Its engine uses ethanol and nitrous oxide as propellants,\n      provides 1 kN of thrust and operates at a chamber pressure of 60 bar. The ablative combustion chamber\n      combines a phenolic liner with a carbon-fiber overwrap and\n      a bonded graphite throat insert. This design combines low\n      mass with the strength and thermal resistance required for\n      reliable engine operation.\n    <\/p>\n\n  <\/div>\n\n<\/article>\n\n  <\/div>\n\n<\/section>\n\n\n\n<p style=\"text-align:center; font-size:inherit;\">\n  LUMINA marks the beginning of a new generation of HyEnD launch vehicles. \n  As the first rocket of the <a href=\"https:\/\/hyend.de\/index.php\/blast\/\">BLAST Project<\/a>, \n  it laid the foundation for many technologies now being taken further.\n<\/p>\n\n<p style=\"text-align:center; font-size:inherit;\">\n  The next step is <a href=\"AURORA-LINK\">AURORA<\/a>, \n  building on LUMINA with further developments in propulsion, structures, avionics and flight systems.\n<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.hyend-cta {\n  max-width: 850px;\n  margin: 55px auto 25px;\n  padding: 42px 35px;\n  text-align: center;\n\n  background: rgba(255, 255, 255, 0.035);\n  border: 1px solid rgba(255, 255, 255, 0.10);\n  border-top: 3px solid #ff8200;\n  border-radius: 8px;\n}\n\n.hyend-cta h3 {\n  margin: 0 0 14px;\n  color: #ffffff;\n  font-size: inherit !important;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\n.hyend-cta p {\n  max-width: 720px;\n  margin: 0 auto 25px;\n  color: #e2e2e2;\n  font-size: inherit !important;\n  line-height: 1.6;\n}\n\n\n\/* Contact button *\/\n.hyend-contact-button {\n  display: inline-block;\n  padding: 12px 28px;\n\n  background: #ff8200;\n  color: #ffffff !important;\n\n  font-size: inherit !important;\n  font-weight: 600;\n  text-decoration: none !important;\n\n  border-radius: 4px;\n\n  transition:\n    transform 0.2s ease,\n    background-color 0.2s ease;\n}\n\n.hyend-contact-button:hover {\n  background: #e97500;\n  color: #ffffff !important;\n  transform: translateY(-2px);\n}\n\n\n\/* Social section *\/\n.hyend-social {\n  margin-top: 30px;\n}\n\n.hyend-social > span {\n  display: block;\n  margin-bottom: 13px;\n\n  color: #bfc3ca;\n  font-size: inherit !important;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n\n\n\/* Icons *\/\n.hyend-social-links {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.hyend-social-links a {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 42px;\n  height: 42px;\n\n  background: rgba(255, 255, 255, 0.08);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 50%;\n\n  color: #ffffff !important;\n  font-size: inherit !important;\n  text-decoration: none !important;\n\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    transform 0.2s ease;\n}\n\n.hyend-social-links a:hover {\n  background: #ff8200;\n  border-color: #ff8200;\n  color: #ffffff !important;\n  transform: translateY(-2px);\n}\n\n\n\/* Mobile *\/\n@media (max-width: 600px) {\n\n  .hyend-cta {\n    margin-top: 35px;\n    padding: 32px 20px;\n  }\n\n  .hyend-cta h3 {\n    font-size: inherit !important;\n  }\n\n  .hyend-cta p {\n    font-size: inherit !important;\n  }\n}\n<\/style>\n\n\n<style data-wp-block-html=\"css\">\n.hyend-cta {\n  max-width: 850px;\n  margin: 55px auto 25px;\n  padding: 42px 35px;\n  text-align: center;\n\n  background: rgba(255, 255, 255, 0.035);\n  border: 1px solid rgba(255, 255, 255, 0.10);\n  border-top: 3px solid #ff8200;\n  border-radius: 8px;\n}\n\n.hyend-cta h3 {\n  margin: 0 0 14px;\n  color: #ffffff;\n  font-size: inherit !important;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\n.hyend-cta p {\n  max-width: 720px;\n  margin: 0 auto 25px;\n  color: #e2e2e2;\n  font-size: inherit !important;\n  line-height: 1.6;\n}\n\n\n\/* Contact button *\/\n.hyend-contact-button {\n  display: inline-block;\n  padding: 12px 28px;\n\n  background: #ff8200;\n  color: #ffffff !important;\n\n  font-size: inherit !important;\n  font-weight: 600;\n  text-decoration: none !important;\n\n  border-radius: 4px;\n\n  transition:\n    transform 0.2s ease,\n    background-color 0.2s ease;\n}\n\n.hyend-contact-button:hover {\n  background: #e97500;\n  color: #ffffff !important;\n  transform: translateY(-2px);\n}\n\n\n\/* Social section *\/\n.hyend-social {\n  margin-top: 30px;\n}\n\n.hyend-social > span {\n  display: block;\n  margin-bottom: 13px;\n\n  color: #bfc3ca;\n  font-size: inherit !important;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n}\n\n\n\/* Icons *\/\n.hyend-social-links {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n}\n\n.hyend-social-links a {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 42px;\n  height: 42px;\n\n  background: rgba(255, 255, 255, 0.08);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 50%;\n\n  color: #ffffff !important;\n  font-size: inherit !important;\n  text-decoration: none !important;\n\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    transform 0.2s ease;\n}\n\n.hyend-social-links a:hover {\n  background: #ff8200;\n  border-color: #ff8200;\n  color: #ffffff !important;\n  transform: translateY(-2px);\n}\n\n\n\/* Mobile *\/\n@media (max-width: 600px) {\n\n  .hyend-cta {\n    margin-top: 35px;\n    padding: 32px 20px;\n  }\n\n  .hyend-cta h3 {\n    font-size: inherit !important;\n  }\n\n  .hyend-cta p {\n    font-size: inherit !important;\n  }\n}\n<\/style>\n\n<div style=\"text-align:center; margin-top:40px;\">\n\n  <p style=\"margin-bottom:16px; font-size:inherit;\">\n    Follow the BLAST Project and our latest developments on social media:\n  <\/p>\n\n  <div class=\"hyend-social-links\">\n\n    <a href=\"https:\/\/www.facebook.com\/Hybridtriebwerk\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n      <i class=\"fab fa-facebook-f\"><\/i>\n    <\/a>\n\n    <a href=\"https:\/\/www.instagram.com\/hyend_uni_stuttgart\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n      <i class=\"fab fa-instagram\"><\/i>\n    <\/a>\n\n    <a href=\"https:\/\/www.linkedin.com\/company\/hyend\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"LinkedIn\">\n      <i class=\"fab fa-linkedin-in\"><\/i>\n    <\/a>\n\n    <a href=\"https:\/\/www.youtube.com\/@HybridEngineDevelopment\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"YouTube\">\n      <i class=\"fab fa-youtube\"><\/i>\n    <\/a>\n\n  <\/div>\n\n<\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LUMINA is our first liquid-propelled sounding rocket and our contribution to EuRoC 2025. It marks an important step towards more &hellip; <a href=\"https:\/\/hyend.de\/index.php\/lumina\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Lumina<\/span><\/a><\/p>\n","protected":false},"author":1040,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4405","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/pages\/4405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/users\/1040"}],"replies":[{"embeddable":true,"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/comments?post=4405"}],"version-history":[{"count":227,"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/pages\/4405\/revisions"}],"predecessor-version":[{"id":4952,"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/pages\/4405\/revisions\/4952"}],"wp:attachment":[{"href":"https:\/\/hyend.de\/index.php\/wp-json\/wp\/v2\/media?parent=4405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}