<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SunMini Balkon-Solarspeicher kaufen – 4,02 kWh | LumenHaus</title>
<meta name="description" content="Balkon-Solarspeicher kaufen: Der SunMini von LumenHaus speichert 4,02 kWh Solarstrom aus deinem Balkonkraftwerk für den Abend. 4 MPPT-Eingänge, App-Steuerung, 10 Jahre Garantie.">
<!--
  ============================================================================
  ZOHO LANDING PAGE 使用说明（简体中文）
  ============================================================================
  此文件是“去 base64、资源外链化”后的 Zoho Landing Page 可用版。

  【背景】原始 standalone 文件把 hero 背景视频(MP4/WebM 桌面+移动)和海报图
  全部内嵌成 base64，整文件 11.7MB。Zoho Landing Page 的 HTML 块有体积限制，
  base64 无法直接粘贴。本版已把所有资源改为外链占位符。

  【资源已配置完成】所有视频和图片已外链化，无需再替换：
      1080p mp4  → static.lumenhaus.com/uploads/sunmini_loop_1080p_49a866001a.mp4
      540p mp4   → static.lumenhaus.com/uploads/sunmini_loop_540p_4c2dad7d99.mp4
      poster     → static.lumenhaus.com/uploads/hero_poster_493671e06c.webp
      bg fallback→ static.lumenhaus.com/uploads/hero_bg_fallback_e6d2a4e713.webp
      (webm 版本已移除，mp4 全浏览器兼容)

  【如何粘进 Zoho Landing Page 构建器】
  方式 A（推荐，HTML 块 + 全局代码）：
    1) 新建页面后，在“设置 / Theme / Custom Code”里粘贴下方的 <style> 全部内容（CSS）。
    2) 用一个 HTML 块粘贴 <body> 中的全部区块（<header>…<section class="specs">…</section>）。
       若一个块放不下，可按 header / hero / urgency+specs 拆成多个 HTML 块。
    3) 在“设置 / Scripts / Custom JS”或另一个 HTML 块粘贴文末 <script> 全部内容。
  方式 B（单块粘贴）：
    直接把本文件的 <style> + <body 区块> + <script> 合起来粘进一个 HTML 块（Zoho 允许块内含 style/script）。
  注意：Zoho 自带 <html>/<head>/<body> 外壳，粘贴时无需（也不应）带上 <!DOCTYPE>、
  <html>、<head>、<body> 这些标签——本文件保留它们仅为本地预览/Zoho Sites 可直接打开。

  【JS 配置】文末脚本顶部有 ORIGINAL_PRICE / SALE_PRICE / OFFER_END_DATE /
  UNITS_LEFT 四个变量，Go-Live 前按实际填写（SALE_PRICE 填如 999，OFFER_END_DATE
  填活动截止时间，UNITS_LEFT 填剩余库存）。

  【如需 Zoho Forms 留资表单】当前页 CTA 为“#specs”锚点跳转（与原版一致）。
  若要改成表单留资，把按钮 href 换成你 Zoho Forms 的 embed 代码/链接即可——告诉我
  表单 embed 代码，我可以帮你接好。
  ============================================================================
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  :root {
    --orange: #FF8A00;
    --orange-deep: #DD7300;
    --ink: #211D1A;
    --ink-soft: #4A443D;
    --cream: #FBF6ED;
    --paper: #FFFFFF;
    --green: #4B5C39;
    --blue: #33526C;
    --card-grey: #F2F2F2;
    --line: #E7DFD2;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wrap: 1200px;
    --gutter: 20px;
    --header-h: 64px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
  body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
  }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
  p { margin: 0; }
  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Fokus: auf allen interaktiven Elementen deutlich sichtbar */
  :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
  .btn:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
  .on-dark :focus-visible, .on-dark .btn:focus-visible { outline-color: var(--paper); box-shadow: none; }

  .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius-s); text-decoration: none; font-weight: 600; }
  .skip-link:focus { top: 12px; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 24px;
    background: var(--orange); color: var(--ink);
    font: 700 16px/1.2 var(--sans);
    border: 0; border-radius: var(--radius-s);
    text-decoration: none; cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(221, 115, 0, .28); }
  .btn:active { transform: translateY(0); }
  .btn--block { width: 100%; }
  .btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
  .btn--lg { min-height: 56px; padding: 16px 32px; font-size: 17px; }
  .text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .text-link:hover { text-decoration-thickness: 2px; }

  /* ---------- Logo ---------- */
  .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .logo svg { height: 34px; width: auto; }
  .logo__word { font: 700 15px/0.95 var(--sans); letter-spacing: .14em; }
  .logo__word span { display: block; font-weight: 500; }

  /* ---------- 1. Sticky Header ---------- */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    height: var(--header-h);
    background: var(--cream);
    box-shadow: 0 2px 16px rgba(33, 29, 26, .10);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .site-header.is-visible { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
  .site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .header-cta { display: flex; align-items: center; gap: 14px; }
  .header-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .header-price__old { font-size: 14px; color: var(--ink-soft); text-decoration: line-through; }
  .header-price__new { font: 700 20px/1 var(--serif); }
  .header-price .chip { font-size: 12px; padding: 3px 7px; }

  /* ---------- Preis-Tag-Komponente ---------- */
  .chip {
    display: inline-block; padding: 4px 10px;
    background: var(--orange); color: var(--ink);
    font: 700 14px/1.2 var(--sans);
    border-radius: 999px; white-space: nowrap;
  }
  .price-tag {
    display: inline-flex; flex-direction: column; gap: 6px;
    padding: 16px 20px;
    background: var(--paper); color: var(--ink);
    border-radius: var(--radius-m);
    box-shadow: 0 10px 30px rgba(33, 29, 26, .18);
  }
  .price-tag__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
  .price-tag__old { font-size: 18px; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
  .price-tag__new { font: 700 44px/1 var(--serif); letter-spacing: -0.02em; }
  .price-tag__note { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
  .price-tag--flat { box-shadow: none; border: 1px solid var(--line); }
  .price-tag--center { align-items: center; text-align: center; }
  .price-tag--center .price-tag__row { justify-content: center; }
  /* Kein Rabatt (SALE_PRICE >= Originalpreis): Streichpreis + Badge ausblenden */
  .no-discount .price-tag__old, .no-discount .js-discount-chip { display: none; }
  /* Preis noch geheim (SALE_PRICE = null): "??? €" mit Streichpreis, aber ohne Badge */
  .price-hidden .js-discount-chip { display: none; }

  /* ---------- 2. Hero ---------- */
  .hero {
    position: relative; isolation: isolate;
    min-height: 92vh; min-height: 92svh;
    display: flex; align-items: flex-end;
    color: var(--paper);
    /* Fallback, falls weder Video noch Poster geladen werden */
    background: var(--ink) url("https://static.lumenhaus.com/uploads/hero_bg_fallback_e6d2a4e713.webp");
    overflow: hidden;
  }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to top, rgba(33, 29, 26, .92) 0%, rgba(33, 29, 26, .72) 32%, rgba(33, 29, 26, .25) 62%, rgba(33, 29, 26, 0) 80%);
  }
  .hero__content { width: 100%; padding-top: 120px; padding-bottom: 40px; }
  .hero__inner { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .badge-award {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .badge-award svg { width: 18px; height: 18px; color: var(--orange); }
  .hero h1 { font-size: clamp(34px, 7.4vw, 64px); font-weight: 600; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
  .hero__sub { font-size: clamp(17px, 2.2vw, 20px); color: rgba(255, 255, 255, .9); max-width: 34em; }
  .hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 4px; }
  .hero__more { color: var(--paper); }
  .hero .price-tag { margin-top: 4px; }
  .video-toggle {
    position: absolute; right: var(--gutter); bottom: 20px; z-index: 2;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: rgba(33, 29, 26, .55); color: var(--paper);
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
    cursor: pointer;
  }
  .video-toggle:hover { background: rgba(33, 29, 26, .8); }
  .video-toggle svg { width: 16px; height: 16px; }
  .video-toggle[hidden] { display: none; }

  /* ---------- 4. Urgency-Leiste ---------- */
  .urgency { background: var(--ink); color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .urgency .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 32px; padding-top: 14px; padding-bottom: 14px; text-align: center; font-size: 15px; }
  .urgency__item { display: inline-flex; align-items: center; gap: 8px; }
  .urgency__item svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
  .urgency strong { color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
  .countdown-unit { white-space: nowrap; }

  /* ---------- 5. Spec-Strip ---------- */
  .specs { background: var(--ink); color: var(--paper); }
  .specs ul { list-style: none; margin: 0; padding: 32px 0 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .specs li { text-align: center; }
  .specs__value { display: block; font: 900 clamp(28px, 4vw, 40px)/1.05 var(--serif); color: var(--orange); }
  .specs__label { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .78); }

  /* ---------- Sektionen allgemein（预留，后续可扩展步骤/经销商/FAQ/Footer 区块） ---------- */
  .section { padding: 72px 0; }
  .section--white { background: var(--paper); }
  .section-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
  .eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
  .section-head h2 { font-size: clamp(30px, 4.6vw, 46px); text-wrap: balance; }
  .section-head p { margin-top: 14px; font-size: 18px; color: var(--ink-soft); }

  /* ---------- 6. Schritte ---------- */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .step { background: var(--paper); border-radius: var(--radius-l); padding: 28px; border: 1px solid var(--line); }
  .step__num { font: 600 44px/1 var(--serif); color: var(--orange); }
  .step h3 { margin-top: 14px; font-size: 24px; }
  .step p { margin-top: 10px; color: var(--ink-soft); }

  .daynight { margin-top: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; }
  .daynight__track { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
  .daynight__slot { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-m); }
  .daynight__slot--day { background: #FFF1DC; }
  .daynight__slot--night { background: var(--ink); color: var(--paper); }
  .daynight__slot svg { width: 40px; height: 40px; flex: none; }
  .daynight__time { font: 700 26px/1 var(--serif); font-variant-numeric: tabular-nums; }
  .daynight__what { font-size: 15px; }
  .daynight__slot--night .daynight__what { color: rgba(255, 255, 255, .82); }
  .daynight__arrow { display: grid; place-items: center; color: var(--orange); }
  .daynight__arrow svg { width: 28px; height: 28px; transform: rotate(90deg); }
  .daynight__note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }

  /* ---------- 7. Händler ---------- */
  .dealer-price { display: flex; justify-content: center; margin: 0 0 32px; }
  .dealers { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .dealer { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card-grey); border-radius: var(--radius-l); padding: 32px; }
  .dealer__logo { height: 56px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
  .dealer__logo svg { height: 36px; width: auto; }
  .dealer h3 { margin-top: 18px; font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: 0; }
  .dealer p { margin-top: 4px; font-size: 14.5px; color: var(--ink-soft); }
  .dealer .btn { margin-top: 22px; }
  .dealers-note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 14px; color: var(--ink-soft); }

  /* ---------- 8. FAQ ---------- */
  .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
  .faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); }
  .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-weight: 600; font-size: 17px; border-radius: var(--radius-m); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
  .faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .faq summary:hover { color: var(--orange-deep); }
  .faq__body { padding: 0 22px 22px; color: var(--ink-soft); }
  .faq__body p + p { margin-top: 10px; }

  /* ---------- 9. Final CTA ---------- */
  .final { background: var(--ink); color: var(--paper); }
  .final__grid { display: grid; gap: 32px; align-items: center; }
  .final__img { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 10; background: #3a332d; }
  .final__img img { width: 100%; height: 100%; object-fit: cover; }
  .final h2 { font-size: clamp(30px, 4.4vw, 44px); text-wrap: balance; }
  .final__lead { margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, .82); }
  .final .price-tag { margin-top: 24px; }
  .final__urgency { margin-top: 18px; display: grid; gap: 6px; font-size: 15px; color: rgba(255, 255, 255, .86); }
  .final__urgency strong { color: var(--orange); font-variant-numeric: tabular-nums; }
  .final .btn { margin-top: 24px; }

  /* ---------- 10. Footer ---------- */
  .footer { background: #171411; color: rgba(255, 255, 255, .78); padding: 44px 0 32px; font-size: 14px; }
  .footer .logo { color: var(--paper); }
  .footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
  .socials { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
  .socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--paper); transition: background-color .18s ease, border-color .18s ease; }
  .socials a:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
  .socials svg { width: 18px; height: 18px; }
  .footer__bottom { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
  .footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
  .footer__links a { text-decoration: none; }
  .footer__links a:hover { color: var(--paper); text-decoration: underline; }

  /* ---------- Breakpoints (mobile-first) ---------- */
  @media (max-width: 639px) {
    .header-price__old, .header-price .chip { display: none; }
    .logo__word { display: none; }
    .hero__content { padding-bottom: 28px; }
    .hero__inner { gap: 12px; }
    /* Hero-Preis kompakt in einer Zeile: 999 € · 1.199 € · -17% */
    .hero .price-tag { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 2px 12px; padding: 12px 16px; }
    .hero .price-tag__row { display: contents; }
    .hero .price-tag__new { grid-row: 1; grid-column: 1; font-size: 34px; }
    .hero .price-tag__old { grid-row: 1; grid-column: 2; font-size: 16px; }
    .hero .price-tag .chip { grid-row: 1; grid-column: 3; justify-self: start; }
    .hero .price-tag__note { grid-column: 1 / -1; font-size: 11.5px; }
    .hero__actions .btn { width: 100%; }
    .hero__actions { width: 100%; justify-content: center; }
    .urgency .wrap { font-size: 14px; gap: 6px 20px; }
    .video-toggle { bottom: auto; top: 16px; }
  }
  @media (min-width: 640px) {
    :root { --gutter: 32px; }
    .specs ul { grid-template-columns: repeat(4, 1fr); }
    .daynight__track { grid-template-columns: 1fr auto 1fr; }
    .daynight__arrow svg { transform: none; }
    .hero__content { padding-bottom: 56px; }
  }
  @media (min-width: 960px) {
    :root { --header-h: 72px; }
    .section { padding: 96px 0; }
    .hero { min-height: 100vh; min-height: 100svh; max-height: 980px; }
    .hero::before {
      background:
        linear-gradient(to top, rgba(33, 29, 26, .88) 0%, rgba(33, 29, 26, .45) 38%, rgba(33, 29, 26, 0) 66%),
        linear-gradient(to right, rgba(33, 29, 26, .6) 0%, rgba(33, 29, 26, .2) 45%, rgba(33, 29, 26, 0) 65%);
    }
    .hero__content { padding-bottom: 72px; }
    .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .dealers { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .final__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  }

  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .btn:hover { transform: none; }
  }
</style>
</head>
<body>
<a class="skip-link" href="#main">Zum Inhalt springen</a>

<!-- Logo-Symbol / Farbverlauf-Definition -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <defs>
    <linearGradient id="lh-grad" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0" stop-color="#FF8A00"/>
      <stop offset="1" stop-color="#FFC21A"/>
    </linearGradient>
    <symbol id="lh-mark" viewBox="0 0 40 40">
      <path d="M4 17.5 20 5l16 12.5V35H4z" fill="none" stroke="url(#lh-grad)" stroke-width="5" stroke-linejoin="round"/>
      <rect x="15" y="20" width="10" height="15" rx="1.5" fill="url(#lh-grad)"/>
    </symbol>
  </defs>
</svg>

<main id="main">

  <!-- ========== 1. STICKY HEADER ========== -->
  <header class="site-header" id="site-header">
    <div class="wrap">
      <a class="logo" href="#top" aria-label="LumenHaus – zum Seitenanfang">
        <svg viewBox="0 0 40 40" aria-hidden="true"><use href="#lh-mark"/></svg>
        <span class="logo__word" aria-hidden="true">LUMEN<span>HAUS</span></span>
      </a>
      <div class="header-cta">
        <div class="header-price js-price" aria-label="Aktionspreis">
          <span class="chip js-discount-chip">-17%</span>
          <span class="header-price__old js-orig-price">1.199 €</span>
          <span class="header-price__new js-sale-price">??? €</span>
        </div>
        <a class="btn btn--sm" href="#specs">Jetzt kaufen</a>
      </div>
    </div>
  </header>

  <!-- ========== 2. HERO – VIDEO-HEADER ========== -->
  <section class="hero on-dark" id="top" aria-label="SunMini Balkon-Solarspeicher">
    <div class="hero__media">
      <!-- Hero 背景视频：H.264(MP4) 优先，VP9(WebM) 回退；桌面/移动按 media 属性分流（修复原版选源逻辑） -->
      <video class="hero__video" id="hero-video"
             muted loop playsinline disablepictureinpicture
             preload="metadata"
             poster="https://static.lumenhaus.com/uploads/hero_poster_493671e06c.webp"
             aria-hidden="true" tabindex="-1">
        <source src="https://static.lumenhaus.com/uploads/sunmini_loop_1080p_49a866001a.mp4" type='video/mp4; codecs="avc1.640032"' media="(min-width: 641px)">
        <source src="https://static.lumenhaus.com/uploads/sunmini_loop_540p_4c2dad7d99.mp4" type='video/mp4; codecs="avc1.64001F"' media="(max-width: 640px)">
      </video>
    </div>

    <div class="hero__content">
      <div class="wrap">
        <div class="hero__inner">
          <span class="badge-award">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 9.5 7.6 3.5 8.2l4.5 4-1.3 5.9L12 15l5.3 3.1-1.3-5.9 4.5-4-6-.6z"/></svg>
            Top Innovation Balcony EES 2026
          </span>
          <h1 style="font-weight:900">Dein Solarstrom. Auch nach Sonnenuntergang.</h1>
          <p class="hero__sub">Der SunMini von LumenHaus. So klein. So schlau. So stark.</p>

          <div class="price-tag js-price" role="group" aria-label="Preis">
            <div class="price-tag__row">
              <span class="price-tag__old js-orig-price"><span class="visually-hidden">Statt </span>1.199 €</span>
              <span class="chip js-discount-chip">-17%</span>
            </div>
            <span class="price-tag__new js-sale-price">??? €</span>
            <span class="price-tag__note">inkl. MwSt., zzgl. Versand · Preis kann je nach Händler variieren</span>
          </div>

          <div class="hero__actions">
            <a class="btn btn--lg" href="#specs">Jetzt Händler wählen →</a>
            <a class="text-link hero__more" href="#specs">Mehr erfahren ↓</a>
          </div>
        </div>
      </div>
    </div>

    <button class="video-toggle" id="video-toggle" type="button" aria-label="Hintergrundvideo pausieren" hidden>
      <svg class="icon-pause" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="3" y="2" width="3.5" height="12" rx="1"/><rect x="9.5" y="2" width="3.5" height="12" rx="1"/></svg>
      <svg class="icon-play" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" style="display:none"><path d="M4 2.5v11a.8.8 0 0 0 1.2.7l9-5.5a.8.8 0 0 0 0-1.4l-9-5.5A.8.8 0 0 0 4 2.5z"/></svg>
    </button>
  </section>

  <!-- ========== 4. URGENCY-LEISTE ========== -->
  <aside class="urgency on-dark" aria-label="Aktionsangebot">
    <div class="wrap">
      <span class="urgency__item js-countdown-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2M9 2h6"/></svg>
        <span>Aktionspreis endet in: <strong class="js-countdown">– Tage – Std. – Min.</strong></span>
      </span>
      <span class="urgency__item js-units-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 12v9"/></svg>
        <span>Nur noch <strong class="js-units">23</strong> Einheiten zu diesem Preis verfügbar</span>
      </span>
    </div>
  </aside>

  <!-- ========== 5. SPEC-STRIP ========== -->
  <section class="specs on-dark" id="specs" aria-label="Technische Eckdaten">
    <div class="wrap">
      <ul>
        <li><span class="specs__value">4,02 kWh</span><span class="specs__label">Speicherkapazität</span></li>
        <li><span class="specs__value">4</span><span class="specs__label">MPPT-Eingänge</span></li>
        <li><span class="specs__value">10 Jahre</span><span class="specs__label">Herstellergarantie</span></li>
        <li><span class="specs__value">App</span><span class="specs__label">Steuerung inklusive</span></li>
      </ul>
    </div>
  </section>

</main>
<script>
/* =====================================================================
   KONFIGURATION – vor Go-Live prüfen/ersetzen
   ===================================================================== */
const ORIGINAL_PRICE = 1199;                               // UVP in €
const SALE_PRICE = null;                                   // TODO: finalen Aktionspreis eintragen (z. B. 999). null = Teaser "??? €", Rabatt-Badge ausgeblendet
const OFFER_END_DATE = new Date('2026-10-17T23:59:59');    // TODO: Aktionsende (lokale Zeit des Besuchers; für feste MEZ/MESZ z. B. '2026-10-17T23:59:59+02:00')
const UNITS_LEFT = 23;                                     // TODO: Restbestand – muss manuell oder per Backend aktuell gehalten werden (0 = Hinweis ausblenden)

/* ===================================================================== */

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

// ---------- Preis & Rabatt (nie hart codiert) ----------
function calcDiscountPercent(original, sale) {
  if (!(original > 0) || !(sale >= 0) || sale >= original) return 0;
  return Math.round((original - sale) / original * 100);
}
function formatEuro(value) {
  const whole = Number.isInteger(value);
  return new Intl.NumberFormat('de-DE', {
    style: 'currency', currency: 'EUR',
    minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: whole ? 0 : 2
  }).format(value);
}
(function renderPrices() {
  const priceHidden = SALE_PRICE === null;
  const discountPercent = priceHidden ? 0 : calcDiscountPercent(ORIGINAL_PRICE, SALE_PRICE);
  document.querySelectorAll('.js-sale-price').forEach(el => {
    el.textContent = priceHidden ? '??? €' : formatEuro(SALE_PRICE);
    if (priceHidden) el.setAttribute('aria-label', 'Aktionspreis wird bald bekanntgegeben');
  });
  document.querySelectorAll('.js-orig-price').forEach(el => {
    el.innerHTML = '<span class="visually-hidden">Statt </span>' + formatEuro(ORIGINAL_PRICE);
  });
  document.querySelectorAll('.js-discount-chip').forEach(el => {
    el.textContent = '-' + discountPercent + '%';
    el.setAttribute('aria-label', discountPercent + ' Prozent Rabatt');
  });
  document.querySelectorAll('.js-price').forEach(el => {
    el.classList.toggle('price-hidden', priceHidden);
    el.classList.toggle('no-discount', !priceHidden && discountPercent === 0);
  });
})();

// ---------- Countdown ----------
function countdownParts(msLeft) {
  const totalMin = Math.max(0, Math.floor(msLeft / 60000));
  return { days: Math.floor(totalMin / 1440), hours: Math.floor(totalMin / 60) % 24, minutes: totalMin % 60 };
}
function formatCountdown(p) {
  const pad = n => String(n).padStart(2, '0');
  return pad(p.days) + (p.days === 1 ? ' Tag ' : ' Tage ') + pad(p.hours) + ' Std. ' + pad(p.minutes) + ' Min.';
}
(function initCountdown() {
  const outputs = document.querySelectorAll('.js-countdown');
  const wraps = document.querySelectorAll('.js-countdown-wrap');
  let timer;
  function tick() {
    const msLeft = OFFER_END_DATE.getTime() - Date.now();
    if (isNaN(msLeft) || msLeft <= 0) {
      // Aktion abgelaufen oder Datum ungültig: Countdown ausblenden statt "00 Tage" anzuzeigen
      wraps.forEach(el => { el.hidden = true; });
      clearInterval(timer);
      return;
    }
    const text = formatCountdown(countdownParts(msLeft));
    outputs.forEach(el => { if (el.textContent !== text) el.textContent = text; });
  }
  tick();
  // Minuten-Anzeige: alle 15 s aktualisieren genügt, keine Animation (auch bei reduced motion unkritisch)
  timer = setInterval(tick, 15000);
})();

// ---------- Lagerbestand ----------
(function initUnits() {
  const show = Number.isFinite(UNITS_LEFT) && UNITS_LEFT > 0;
  document.querySelectorAll('.js-units').forEach(el => { el.textContent = UNITS_LEFT; });
  document.querySelectorAll('.js-units-wrap').forEach(el => { el.hidden = !show; });
})();

// ---------- Hero-Video ----------
(function initHeroVideo() {
  const video = document.getElementById('hero-video');
  const toggle = document.getElementById('video-toggle');
  if (!video) return;
  const isMobile = window.matchMedia('(max-width: 640px)').matches;
  // JS-Weiche: nicht alle Browser werten <source media> aus – passende Größe und Format daher explizit wählen
  const sources = Array.from(video.querySelectorAll('source'))
    .filter(el => el.hasAttribute('media') === isMobile)
    .filter(el => video.canPlayType(el.type) !== '');
  if (sources.length) video.src = sources[0].getAttribute('src');
  // Desktop: vollständig vorladen; Mobile: nur Metadaten (Datenvolumen); reduzierte Bewegung: gar nicht
  video.preload = reduceMotion.matches ? 'none' : (isMobile ? 'metadata' : 'auto');

  let userPaused = false;
  function setToggleState(playing) {
    toggle.querySelector('.icon-pause').style.display = playing ? '' : 'none';
    toggle.querySelector('.icon-play').style.display = playing ? 'none' : '';
    toggle.setAttribute('aria-label', playing ? 'Hintergrundvideo pausieren' : 'Hintergrundvideo abspielen');
  }
  function tryPlay() {
    if (reduceMotion.matches || userPaused) return;
    const p = video.play();
    if (p && typeof p.then === 'function') {
      p.then(() => { toggle.hidden = false; setToggleState(true); })
       .catch(err => {
         // Autoplay blockiert (z. B. iOS-Stromsparmodus, Browser-Einstellung): Poster bleibt sichtbar,
         // Play-Button anbieten. Bei nicht abspielbarer Datei Button ausblenden.
         if (err && err.name === 'NotAllowedError') { toggle.hidden = false; setToggleState(false); }
         else toggle.hidden = true;
       });
    }
  }
  function stop() { video.pause(); setToggleState(false); }

  toggle.addEventListener('click', () => {
    if (video.paused) { userPaused = false; tryPlay(); }
    else { userPaused = true; stop(); }
  });
  // Ladefehler einer Quelle: Poster stehen lassen
  video.addEventListener('error', () => { toggle.hidden = true; }, true);

  reduceMotion.addEventListener('change', e => {
    if (e.matches) { stop(); toggle.hidden = true; } else tryPlay();
  });
  // Nicht im Hintergrund abspielen, wenn der Hero aus dem Viewport ist (spart Akku/CPU)
  if ('IntersectionObserver' in window) {
    new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) tryPlay(); else if (!video.paused) video.pause(); });
    }, { threshold: 0.1 }).observe(video);
  } else {
    tryPlay();
  }
})();

// ---------- Sticky Header ----------
(function initHeader() {
  const header = document.getElementById('site-header');
  const hero = document.querySelector('.hero');
  if (!header || !hero) return;
  function update() {
    const show = window.scrollY > hero.offsetHeight * 0.5;
    header.classList.toggle('is-visible', show);
  }
  update();
  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update, { passive: true });
})();


// Für QA-Tests im Browser
window.__sunmini = { calcDiscountPercent, countdownParts, formatCountdown, formatEuro };
</script>
</body>
</html>
