// HomeFotoV2.jsx — Hi-Fi-Home (V2 · Foto-Hero) eingebaut in den UI-Kit-Prototyp.
//
// Spiegelt den akzeptierten Home-Wireframe (Home_V2_FotoHero) mit echtem
// Tschense-Design-System und echten Fotos aus assets/photos/.
//
// Aufbau:
//   1) Foto-Hero (dunkel mit Foto-Overlay)
//   2) Modus-Duo (Trauerfall + Vorsorge · 50/50)
//   3) Zitat (Albert Schweitzer · cremig)
//   4) Schritte (Im Trauerfall · 3 Karten comp-steps · Header + „Ausführlich →")
//   5) Leistungen-Mini (4 Karten · Bild + Icon + Titel + Body)
//   6) Sterbeurkunde-Banner (dunkel · PDF-CTA)
//   7) Vorsorge-Teaser (Salbei · zweispaltig mit Foto)
//   8) Über uns-Teaser („Herzlich willkommen" · Kupfer · 5,0 ★)
//   9) Sonstiges (4 Inseln · Friedhöfe / Tradition / Karriere / Bewertung)
//  10) Fragen-Banner (dunkel mit Foto · FAQ + Telefon)

/* ─────────────── Icons ─────────────── */

const HmIcHeart = ({ size = 22 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>;
const HmIcTruck = ({ size = 22 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" /><path d="M15 18H9" /><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" /><circle cx="17" cy="18" r="2" /><circle cx="7" cy="18" r="2" /></svg>;
const HmIcDocs = ({ size = 22 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M9 13h6M9 17h4" /></svg>;
const HmIcCeremony = ({ size = 22 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3c0 1.5-2 2.2-2 4a2 2 0 1 0 4 0c0-1.8-2-2.5-2-4z" /><path d="M9 10h6v9a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-9z" /><path d="M5 21h14" /></svg>;
const HmIcCheck = ({ size = 11 }) => <svg width={size} height={size} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 10l3 3 7-7" /></svg>;
const HmIcPhone = ({ size = 18 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" /></svg>;
const HmIcFaq = ({ size = 16 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5" /><circle cx="12" cy="17" r=".6" fill="currentColor" /></svg>;
const HmIcQuote = () => <svg width="44" height="34" viewBox="0 0 44 34" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', margin: '0 auto 18px' }}><path d="M3 22c0-9 5-15 14-19M3 22h10v8H3z" /><path d="M22 22c0-9 5-15 14-19M22 22h10v8H22z" /></svg>;
const HmIcSquiggle = ({ w = 80 }) => <svg width={w} height="14" viewBox="0 0 80 14" fill="none" stroke="currentColor" strokeWidth="1" style={{ display: 'block', margin: '0 auto' }}><path d="M2 7 Q 12 1, 22 7 T 42 7 T 62 7 T 78 7" /></svg>;

/* ─────────────── 1) Hero · Foto + dunkler Overlay ─────────────── */

function HM_HeroFoto() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      minHeight: 680, background: 'var(--surface-ink)',
      color: '#fff'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(${window._r(window._r('assets/photos/candle-hands.jpg'))}) center/cover`,
        opacity: .62
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(95deg, rgba(20,18,17,.94) 0%, rgba(20,18,17,.78) 38%, rgba(20,18,17,.42) 70%, rgba(20,18,17,.2) 100%)'
      }} />

      <div style={{ position: 'relative', maxWidth: 1140, margin: '0 auto', padding:'128px var(--page-x) 124px' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)',
          textTransform: 'uppercase', color: 'var(--brand-accent)'
        }}>
          <span style={{ width: 28, height: 1, background: 'var(--brand-accent)', display: 'inline-block' }} />
          Tschense Bestattungen · Wolfsburg
        </span>

        <h1 style={{
          fontFamily: 'var(--f-body)', fontWeight: 300,
          fontSize: 62, lineHeight: 1.18, letterSpacing: '-.015em',
          color: '#fff', margin: '26px 0 14px', maxWidth: '18ch'
        }}>
          Wir begleiten Sie auf Ihrem{' '}
          <em style={{
            fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 200,
            color: 'var(--brand-accent)', fontSize: 72, lineHeight: 1.15, letterSpacing: '-.02em'
          }}>Weg der Trauer.</em>
        </h1>

        <p style={{ color: 'rgba(255,255,255,.78)', maxWidth: '54ch', fontSize: 17, margin: '18px 0 0', lineHeight: 1.7, fontWeight: 300 }}>
          Trauer braucht Raum und Zeit. Unser Ziel ist es, Ihnen Raum und Zeit zu geben und Sie durch unsere langjährige Erfahrung zu begleiten — persönlich, in Ruhe, ohne Druck.
        </p>

        <div style={{ display: 'flex', gap: 14, marginTop: 46, flexWrap: 'wrap', alignItems: 'center' }}>
          <PhoneCTA dark={false} />
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center',
            font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            padding: '15px 26px', background: 'transparent', color: '#e8e2dc',
            border: '1px solid rgba(255,255,255,.32)', textDecoration: 'none'
          }}>
            Zum Kontaktformular
          </a>
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 52, flexWrap: 'wrap' }}>
          {['Vertrauen', 'Respekt', 'Erinnerung'].map((t) =>
          <span key={t} style={{
            border: '1px solid rgba(255,255,255,.18)', color: '#d9d2cc',
            fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
            padding: '8px 14px', borderRadius: 99
          }}>{t}</span>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────── 2) Modus-Duo · Trauerfall + Vorsorge 50/50 ─────────────── */

function HM_ModusDuo() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden', minHeight: 720,
      background: 'var(--surface-ink)'
    }}>
      {/* EIN großes Hintergrundbild über beide Spalten */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(${window._r(window._r('assets/photos/sea-misty.jpg'))}) center/cover`
      }} />
      {/* EIN durchgehender Farbverlauf · dunkel links → hell rechts */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(20,18,17,.92) 0%, rgba(230,232,221,.20) 100%)'
      }} />

      {/* Zwei Spalten · jeweils mit eigenem Verlauf-Overlay */}
      <div style={{
        position: 'relative', display: 'flex', gap: 100, justifyContent: 'center', alignItems: 'center', minHeight: 720, padding: '60px 40px'
      }}>
        {/* ────────── LINKS · Trauerfall · dunkler Overlay ────────── */}
        <article style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--mode-traue-island-fg)' }} data-comment-anchor="56ad790fbf-article-127-9">
          <div style={{
            position: 'relative', zIndex: 1,
            display: 'flex', flexDirection: 'column', gap: 20, padding: "40px",
            background: 'rgba(0,0,0,.10)'

          }}>
                        <span style={{
              font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              color: 'var(--accent-trauerfall)', display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent-trauerfall)', flexShrink: 0 }} />
              Modus · Trauerfall
            </span>
            <h2 style={{
              margin: 0, fontFamily: 'var(--f-display)', fontWeight: 300,
              lineHeight: 1.12, letterSpacing: '-.015em',
              color: 'var(--mode-traue-island-fg)', maxWidth: '16ch', fontSize: "62px", height: "62px"
            }}>
              Es ist <em style={{ fontStyle: 'italic', fontFamily: 'var(--f-display)', fontWeight: 300, color: 'var(--mode-traue-island-eyebrow)', letterSpacing: '-.01em', fontSize: '62px' }}>passiert.</em>
            </h2>
            <p style={{
              margin: 0, fontFamily: 'var(--f-body)', fontWeight: 300,
              lineHeight: 1.25, letterSpacing: '-.01em',
              color: 'var(--mode-traue-island-fg)', maxWidth: '20ch', height: "28px", fontSize: "28px"
            }}>
              Wir sind jetzt für Sie da.
            </p>
            <p style={{ margin: 0, color: 'var(--mode-traue-island-muted)', maxWidth: '40ch', lineHeight: 1.7, fontSize: "16px", height: "70px" }}>
              Rufen Sie an, zu jeder Zeit. Wir besprechen in Ruhe die Situation und nehmen Ihnen die ersten Sorgen ab.
            </p>
            <a href="tel:053614222" style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,

              background: 'var(--mode-traue-cta-bg)', color: '#fff',
              textDecoration: 'none', alignSelf: 'flex-start',
              boxShadow: '0 18px 38px -12px var(--mode-traue-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)', width: "340px", padding: "18px 30px 18px 41px"
            }}>
              <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'rgba(255,255,255,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <HmIcPhone size={18} />
              </span>
              <span>
                <span style={{ display: 'block', font: '500 24px/1 var(--f-body)', letterSpacing: "1.1px" }}>05361 · 4 22 22</span>
                <span style={{ display: 'block', font: '600 9px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'rgba(255,255,255,.78)', marginTop: 6 }}>24h erreichbar</span>
              </span>
            </a>
            <ul style={{ listStyle: 'none', padding: 0, margin: '10px 0 0', display: 'flex', flexDirection: 'column', gap: 11 }}>
              {['Überführung übernehmen wir sofort', 'Behördengänge und Formalitäten', 'Erster Termin — ruhig, ohne Druck'].map((t) =>
              <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: 'var(--mode-traue-island-muted)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent-trauerfall-soft)', color: 'var(--accent-trauerfall)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <HmIcCheck />
                  </span>
                  {t}
                </li>
              )}
            </ul>
                        <a href="#trauerfall" style={{
              marginTop: 8, font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              color: 'var(--accent-trauerfall)', textDecoration: 'none',
              paddingBottom: 4, borderBottom: '1px solid var(--accent-trauerfall)', alignSelf: 'flex-start'
            }}>Was tun im Trauerfall →</a>
          </div>
        </article>

        {/* ────────── RECHTS · Vorsorge · heller Overlay ────────── */}
        <article style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            position: 'relative', zIndex: 1,
            display: 'flex', flexDirection: 'column', gap: 20, padding: "40px",
            background: 'rgba(106,120,106,.30)'
          }}>
            <ModusEyebrow tone="vorsorge" />
            <h2 style={{
              margin: 0, fontFamily: 'var(--f-display)', fontWeight: 300,
              lineHeight: 1.12, letterSpacing: '-.015em',
              color: 'var(--ink-900)', maxWidth: '16ch', fontSize: "62px", height: "62px"
            }}>
              Vorausge<em style={{ fontStyle: 'italic', fontFamily: 'var(--f-display)', fontWeight: 300, color: 'var(--mode-vor-accent-ink)', letterSpacing: '-.01em', fontSize: '62px' }}><span style={{ color: '#2a2a2a' }}>dacht.</span></em>
            </h2>
            <p style={{
              margin: 0, fontFamily: 'var(--f-body)', fontWeight: 300,
              lineHeight: 1.25, letterSpacing: '-.01em',
              maxWidth: '20ch', height: "28px", fontSize: "28px", color: "rgb(79, 92, 79)"
            }}>
              entlastend.
            </p>
            <p style={{ margin: 0, maxWidth: '40ch', lineHeight: 1.7, color: "rgb(74, 74, 74)", fontSize: "16px", height: "70px" }}>
              Sichern Sie die Kosten Ihrer Bestattung ab und entlasten Sie Ihre Angehörigen — in Ihrem Tempo, ohne Verpflichtung.
            </p>
            <a href="#vorsorge" style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,

              background: 'var(--mode-vor-cta-bg)', color: '#fff',
              textDecoration: 'none', alignSelf: 'flex-start',
              boxShadow: '0 14px 28px -10px var(--mode-vor-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)', width: "340px", padding: "18px 30px"
            }}>
              <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'rgba(255,255,255,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <HmIcDocs size={18} />
              </span>
              <span>
                <span style={{ display: 'block', font: '500 14px/1 var(--f-body)', textTransform: 'uppercase', fontSize: "24px", letterSpacing: "1px" }}>KOSTENRECHNER</span>
                <span style={{ display: 'block', font: '600 9px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'rgba(255,255,255,.78)', marginTop: 6 }}>unverbindlich</span>
              </span>
            </a>
            <ul style={{ listStyle: 'none', padding: 0, margin: '10px 0 0', display: 'flex', flexDirection: 'column', gap: 11 }}>
              {['Bestattungsform und Trauerfeier', 'Schriftliche Verfügung', 'Treuhänderische Finanzierung'].map((t) =>
              <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: 'var(--ink-700)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--mode-vor-check)', color: 'var(--mode-vor-accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <HmIcCheck />
                  </span>
                  {t}
                </li>
              )}
            </ul>
            <a href="#vorsorge" style={{
              marginTop: 8, font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              color: 'var(--mode-vor-accent-ink)', textDecoration: 'none',
              paddingBottom: 4, borderBottom: '1px solid var(--mode-vor-accent)', alignSelf: 'flex-start'
            }}>Mehr zur Vorsorge →</a>
          </div>
        </article>
      </div>
    </section>);

}

/* ─────────────── 3) Zitat-Sektion ─────────────── */

function HM_Quote() {
  return (
    <section style={{ padding:'88px var(--page-x)', background: 'var(--surface-warm)', position: 'relative', overflow: 'hidden' }}>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
      style={{ position: 'absolute', left: '-2%', top: '14%', height: 340, opacity: .10, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', position: 'relative', color: 'var(--brand-accent)' }}>
        <HmIcQuote />
        <blockquote style={{
          margin: '0 auto 18px', maxWidth: '52ch', quotes: 'none',
          font: '300 30px/1.5 var(--f-display)', color: 'var(--ink-900)',
          letterSpacing: '-.005em'
        }}>
          „Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen."
        </blockquote>
        <cite style={{
          display: 'inline-block', font: '600 11px/1 var(--f-body)',
          letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
          color: 'var(--brand-accent)', fontStyle: 'normal'
        }}>— Albert Schweitzer</cite>
      </div>
    </section>);

}

/* ─────────────── 4) Schritte · Im Trauerfall ─────────────── */

const HM_STEPS = [
{ n: 1, h: 'Anrufen', p: 'Sie erreichen uns jederzeit. Wir nehmen Ihnen die ersten Sorgen ab.' },
{ n: 2, h: 'Wir kümmern uns', p: 'Überführung, Formalitäten, Organisation — Sie müssen nichts allein tragen.' },
{ n: 3, h: 'Abschied gestalten', p: 'Würdevoll, in Ihrem Tempo, passend zum Menschen.' }];


function HM_StepsTrauerfall() {
  return (
    <section style={{ padding:'96px var(--page-x) 52px', background: 'var(--surface)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 44, flexWrap: 'wrap' }}>
          <div>
            <span style={{
              font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              color: 'var(--accent-trauerfall)', display: 'inline-flex', alignItems: 'center', gap: 12
            }}>
              <span style={{ width: 24, height: 1, background: 'var(--accent-trauerfall)', display: 'inline-block' }} />
              Im Trauerfall
            </span>
            <h2 style={{
              margin: '14px 0 0', font: '300 38px/1.15 var(--f-display)',
              color: 'var(--ink-900)', letterSpacing: '-.01em', maxWidth: '18ch'
            }}>
              Wir kümmern uns um <em style={{ fontStyle: 'italic', color: 'var(--accent-trauerfall)', fontWeight: 400 }}>alles Weitere.</em>
            </h2>
            <div style={{ marginTop: 10, font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--ink-500)' }}>
              Ein Anruf genügt.
            </div>
          </div>
          <a href="#trauerfall" style={{
            font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            color: 'var(--accent-trauerfall)', textDecoration: 'none',
            paddingBottom: 4, borderBottom: '1px solid var(--accent-trauerfall)'
          }}>Ausführlich →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {HM_STEPS.map((s) =>
          <div key={s.n} style={{
            background: 'var(--surface-cool)', border: '1px solid var(--line-soft)',
            padding: '40px 28px 36px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
            textAlign: 'center'
          }}>
              <span style={{
              width: 56, height: 56, borderRadius: '50%',
              background: 'var(--accent-trauerfall)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: '300 24px/1 var(--f-body)', fontVariantNumeric: 'tabular-nums',
              boxShadow: '0 8px 18px -8px rgba(168,48,45,.55)'
            }}>{s.n}</span>
              <h4 style={{ margin: '4px 0 0', font: '400 22px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>{s.h}</h4>
              <p style={{ margin: 0, font: '300 14px/1.6 var(--f-body)', color: 'var(--ink-500)', maxWidth: '28ch' }}>{s.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────── 5) Leistungen-Mini · 4 Karten ─────────────── */

const HM_LEISTUNGEN = [
{ title: 'Persönliche Begleitung', body: 'Ehrliche Beratung in Ihrem Tempo — auch nach dem Abschied.', img: window._r('assets/photos/lily-grave.jpg'), Icon: HmIcHeart },
{ title: 'Überführungen', body: 'Würdevolle Überführung im In- und Ausland — wir kümmern uns.', img: window._r('assets/photos/ueberfuehrung.jpg'), Icon: HmIcTruck },
{ title: 'Botengänge', body: 'Behördengänge, Formalitäten, Versicherungen — Sie müssen nichts allein tragen.', img: window._r('assets/photos/financial-planning.jpg'), Icon: HmIcDocs },
{ title: 'Trauerfeiern', body: 'Wir gestalten einen würdevollen Abschied — passend zum Menschen.', img: window._r('assets/photos/mourners-coffin.jpg'), Icon: HmIcCeremony }];


function HM_LeistungenMini() {
  return (
    <section style={{ padding:'12px var(--page-x) 96px', background: 'var(--surface)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {HM_LEISTUNGEN.map((it) =>
          <article key={it.title} style={{
            background: 'var(--surface-cool)', border: '1px solid var(--line-soft)',
            position: 'relative', paddingBottom: 26,
            display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
            overflow: 'hidden'
          }}>
              <div style={{ width: '100%', aspectRatio: '5 / 2.8', background: `url('${it.img}') center/cover` }} />
              <div style={{
              width: 46, height: 46, borderRadius: '50%',
              background: 'var(--accent-trauerfall)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginTop: -23, position: 'relative', zIndex: 1,
              boxShadow: '0 6px 14px -6px rgba(168,48,45,.5), 0 0 0 4px var(--surface-cool)'
            }}><it.Icon size={20} /></div>
              <h4 style={{ margin: '14px 18px 0', font: '400 19px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>{it.title}</h4>
              <p style={{ margin: '8px 22px 0', fontSize: 13.5, color: 'var(--ink-500)', lineHeight: 1.6, maxWidth: '26ch' }}>{it.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────── 6) Sterbeurkunde-Banner (dunkel mit Foto) ─────────────── */

function HM_SterbeurkundeBanner() {
  return (
    <section style={{ background: 'var(--surface-ink)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: `url(${window._r(window._r('assets/photos/financial-planning.jpg'))}) center/cover`, opacity: .28 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(31,29,28,.92) 0%, rgba(31,29,28,.74) 55%, rgba(31,29,28,.55) 100%)' }} />
      <div style={{
        position: 'relative', maxWidth: 1140, margin: '0 auto',
        padding:'94px var(--page-x)',
        display: 'grid', gridTemplateColumns: '1.5fr auto', gap: 56, alignItems: 'center'
      }}>
        <div>
          <span style={{
            font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            color: '#e89280', display: 'inline-flex', alignItems: 'center', gap: 12
          }}>
            <span style={{ width: 24, height: 1, background: '#e89280', display: 'inline-block' }} />
            Im Trauerfall · Checkliste
          </span>
          <h3 style={{
            margin: '14px 0 0', maxWidth: '34ch',
            font: '300 30px/1.25 var(--f-display)', color: '#fff', letterSpacing: '-.005em'
          }}>
            Für die Beantragung der Sterbeurkunde benötigen wir <em style={{ fontStyle: 'italic', color: '#e89280', fontWeight: 400 }}>folgende Dokumente.</em>
          </h3>
        </div>
        <a href="#" style={{
          display: 'inline-flex', alignItems: 'center', gap: 16,
          padding: '20px 28px', background: 'var(--accent-trauerfall)', color: '#fff',
          textDecoration: 'none',
          boxShadow: '0 14px 32px -10px rgba(168,48,45,.55), inset 0 1px 0 rgba(255,255,255,.18)'
        }}>
          <span style={{
            width: 34, height: 42, border: '1.5px solid #fff', position: 'relative',
            display: 'inline-flex', alignItems: 'flex-end', justifyContent: 'center',
            paddingBottom: 4, flexShrink: 0
          }}>
            <span style={{ position: 'absolute', top: -1, right: -1, width: 10, height: 10, background: 'var(--accent-trauerfall)', borderLeft: '1.5px solid #fff', borderBottom: '1.5px solid #fff' }} />
            <span style={{ font: '700 9px/1 var(--f-body)', letterSpacing: '.05em', color: '#fff' }}>PDF</span>
          </span>
          <div style={{ textAlign: 'left' }}>
            <div style={{ font: '600 13px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: '#fff' }}>Checkliste</div>
            <div style={{ marginTop: 5, font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'rgba(255,255,255,.78)' }}>Zum Downloaden und Ausdrucken</div>
          </div>
        </a>
      </div>
    </section>);

}

/* ─────────────── 7) Vorsorge-Teaser (Salbei) ─────────────── */

function HM_VorsorgeTeaser() {
  return (
    <section style={{ padding:'96px var(--page-x)', background: 'var(--mode-vor-stage-bg)', position: 'relative', overflow: 'hidden' }}>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
      style={{ position: 'absolute', right: '-3%', bottom: '-6%', height: 360, opacity: .10, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <ModusEyebrow tone="vorsorge" />
          <h2 style={{
            margin: '14px 0 12px', font: '300 44px/1.15 var(--f-display)',
            color: 'var(--ink-900)', letterSpacing: '-.01em', maxWidth: '18ch'
          }}>
            Selbst entscheiden, <em style={{ fontStyle: 'italic', color: 'var(--mode-vor-accent-ink)', fontWeight: 400 }}>schriftlich festgehalten.</em>
          </h2>
          <p style={{ margin: '0 0 28px', font: '300 16px/1.75 var(--f-body)', color: 'var(--ink-500)', maxWidth: '52ch' }}>
            Form, Sarg oder Urne, Trauerfeier, Beisetzungsort — Sie entscheiden, wir halten Ihre Wünsche schriftlich fest. Treuhänderisch hinterlegt, jederzeit anpassbar.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 18px' }}>
            {['Bestattungsform', 'Sarg oder Urne', 'Trauerfeier', 'Beisetzungsort', 'Musik & Trauerredner', 'Bezugsberechtigte'].map((t) =>
            <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, font: '400 14px/1.4 var(--f-body)', color: 'var(--ink-700)' }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--mode-vor-check)', color: 'var(--mode-vor-accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <HmIcCheck />
                </span>{t}
              </li>
            )}
          </ul>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <VorsorgeCTA variant="solid" label="Kostenrechner öffnen" sub="unverbindlich" />
            <a href="#vorsorge" style={{
              font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              color: 'var(--mode-vor-accent-ink)', textDecoration: 'none',
              paddingBottom: 4, borderBottom: '1px solid var(--mode-vor-accent)'
            }}>Mehr erfahren →</a>
          </div>
        </div>
        <div style={{
          aspectRatio: '5 / 6', background: `url(${window._r(window._r('assets/photos/coins-time.jpg'))}) center/cover`,
          boxShadow: '0 30px 60px -20px rgba(0,0,0,.25)'
        }} />
      </div>
    </section>);

}

/* ─────────────── 8) Über uns-Teaser (Kupfer) ─────────────── */

function HM_AboutTeaser() {
  return (
    <section style={{ padding:'96px var(--page-x)', background: 'var(--surface)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 72, alignItems: 'center' }}>
        <div style={{
          aspectRatio: '5 / 6', background: `url(${window._r(window._r('assets/photos/grave-autumn.jpg'))}) center/cover`,
          boxShadow: '0 30px 60px -20px rgba(0,0,0,.25)'
        }} />
        <div>
          <span style={{
            font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            color: 'var(--brand-accent)', display: 'inline-flex', alignItems: 'center', gap: 12
          }}>
            <span style={{ width: 24, height: 1, background: 'var(--brand-accent)', display: 'inline-block' }} />
            Über uns
          </span>
          <h2 style={{
            margin: '14px 0 14px', font: '300 44px/1.15 var(--f-display)',
            color: 'var(--ink-900)', letterSpacing: '-.01em', maxWidth: '18ch'
          }}>
            Herzlich <em style={{ fontStyle: 'italic', color: 'var(--brand-accent)', fontWeight: 400 }}>willkommen.</em>
          </h2>
          <p style={{ margin: '0 0 12px', font: '400 16px/1.75 var(--f-body)', color: 'var(--ink-700)', maxWidth: '54ch' }}>
            Wir sind ein familiengeführtes Bestattungsunternehmen in Wolfsburg — seit Jahrzehnten an der Seite von Menschen, die einen geliebten Menschen verloren haben.
          </p>
          <p style={{ margin: '0 0 28px', font: '300 16px/1.75 var(--f-body)', color: 'var(--ink-500)', maxWidth: '54ch' }}>
            „Trauer braucht Raum und Zeit. Unser Ziel ist es, Ihnen Raum und Zeit zu geben und Sie durch unsere langjährige Erfahrung auf Ihrem Weg der Trauer zu begleiten."
          </p>
          <a href="#about" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            padding: '14px 28px', background: 'transparent', color: 'var(--ink-900)',
            border: '1px solid var(--ink-200)', textDecoration: 'none'
          }}>Mehr über uns →</a>
        </div>
      </div>
    </section>);

}

/* ─────────────── 9) Sonstiges · 4 Inseln ─────────────── */

const HM_SONSTIGES = [
{ eyebrow: 'Friedhöfe', title: 'Friedhöfe in Wolfsburg', sub: 'Übersicht der Friedhöfe — Lage, Öffnungszeiten und Besonderheiten.', cta: 'Zur Übersicht →', img: window._r('assets/photos/cemetery-evening.jpg') },
{ eyebrow: 'Tradition', title: 'Familienbetrieb seit 1923', sub: 'Vier Generationen in Wolfsburg — Erfahrung, Diskretion, Verlässlichkeit.', cta: 'Mehr erfahren →', img: window._r('assets/photos/church-cross.jpg') },
{ eyebrow: 'Karriere', title: 'Mitarbeiter werden', sub: 'Wir suchen Verstärkung — ehrlich, respektvoll, sorgsam mit Menschen.', cta: 'Offene Stellen →', img: window._r('assets/photos/rose-angel.jpg') },
{ eyebrow: '5,0 ★', title: 'Was Familien sagen', sub: '100 % Weiterempfehlung — Google-Bewertungen von Menschen aus Wolfsburg.', cta: 'Bewertungen →', img: window._r('assets/photos/lily-grave.jpg') }];


function HM_Sonstiges() {
  return (
    <section style={{ padding:'96px var(--page-x) 104px', background: 'var(--surface-paper)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span style={{
            font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            color: 'var(--brand-accent)', display: 'inline-flex', alignItems: 'center', gap: 12
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brand-accent)' }} />
            Sonstiges
          </span>
          <h2 style={{
            margin: '14px 0 6px', font: '300 38px/1.15 var(--f-display)',
            color: 'var(--ink-900)', letterSpacing: '-.005em'
          }}>
            Mehr aus dem <em style={{ fontStyle: 'italic', color: 'var(--brand-accent)', fontWeight: 400 }}>Bestattungshaus.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {HM_SONSTIGES.map((it) =>
          <article key={it.title} style={{
            background: 'var(--surface)', border: '1px solid var(--line-soft)',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
            boxShadow: '0 14px 35px -22px rgba(0,0,0,.18)'
          }}>
              <div style={{ width: '100%', aspectRatio: '5 / 4', background: `url('${it.img}') center/cover` }} />
              <div style={{ padding: '22px 22px 26px' }}>
                <span style={{
                font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
                color: 'var(--brand-accent)'
              }}>· {it.eyebrow}</span>
                <h3 style={{ margin: '10px 0 8px', font: '400 21px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>{it.title}</h3>
                <p style={{ margin: '0 0 14px', font: '300 13.5px/1.65 var(--f-body)', color: 'var(--ink-500)' }}>{it.sub}</p>
                <a href="#" style={{
                font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
                color: 'var(--brand-accent)', textDecoration: 'none',
                paddingBottom: 4, borderBottom: '1px solid var(--brand-accent)'
              }}>{it.cta}</a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────────── 10) Fragen-Banner (dunkel mit Foto) ─────────────── */

function HM_FragenBanner() {
  return (
    <section style={{ background: 'var(--surface-ink)', color: '#fff', position: 'relative', overflow: 'hidden', minHeight: 380 }}>
      <div style={{ position: 'absolute', inset: 0, background: `url(${window._r(window._r('assets/photos/church-cross.jpg'))}) center/cover`, opacity: .42 }} />
      <div style={{ position: 'relative', maxWidth: 1140, margin: '0 auto', padding:'88px var(--page-x)', display: 'flex', alignItems: 'center', minHeight: 380 }}>
        <div style={{ width: '100%' }}>
          <span style={{
            font: '600 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
            color: 'var(--brand-accent)', display: 'inline-flex', alignItems: 'center', gap: 12
          }}>
            <span style={{ width: 28, height: 1, background: 'var(--brand-accent)', display: 'inline-block' }} />
            Wir sind für Sie da
          </span>
          <h2 style={{
            margin: '18px 0 14px',
            font: '300 50px/1.15 var(--f-display)', color: '#fff', letterSpacing: '-.005em'
          }}>
            Sie haben <em style={{ fontStyle: 'italic', color: 'var(--brand-accent)', fontWeight: 400 }}>Fragen?</em>
          </h2>
          <p style={{ margin: '0 0 28px', font: '300 16px/1.75 var(--f-body)', color: 'rgba(255,255,255,.82)', maxWidth: '52ch' }}>
            Viele Antworten finden Sie bereits in unseren häufig gestellten Fragen — oder rufen Sie uns einfach an. Wir sind persönlich für Sie erreichbar.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'nowrap', alignItems: 'center' }}>
            <a href="#faq" style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '15px 28px', background: 'var(--brand-accent)', color: '#fff',
              font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              textDecoration: 'none',
              boxShadow: '0 14px 32px -10px rgba(199,134,101,.55), inset 0 1px 0 rgba(255,255,255,.18)'
            }}>
              <HmIcFaq size={15} />Zu den FAQ
            </a>
            <a href="tel:053614222" style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '15px 28px', background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,.4)',
              font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase',
              textDecoration: 'none'
            }}>
              <HmIcPhone size={15} />05361 · 4 22 22
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────────── Top-Level ─────────────── */

function HomeFotoV2() {
  return (
    <>
      <HM_ModusDuo />
      <HM_Quote />
      <HM_StepsTrauerfall />
      <HM_LeistungenMini />
      <HM_SterbeurkundeBanner />
      <HM_VorsorgeTeaser />
      <HM_AboutTeaser />
      <HM_Sonstiges />
      <HM_FragenBanner />
    </>);

}

Object.assign(window, { HomeFotoV2, HM_HeroFoto, HM_ModusDuo, HM_Quote, HM_StepsTrauerfall, HM_LeistungenMini, HM_SterbeurkundeBanner, HM_VorsorgeTeaser, HM_AboutTeaser, HM_Sonstiges, HM_FragenBanner });