// LeistungenHifi.jsx — Hi-Fi Leistungen (Klassisch) eingebaut in den UI-Kit-Prototyp.
//
// Spiegelt das akzeptierte Wireframe Leistungen_V1_DreiSektionen 1:1, jetzt mit
// echtem Tschense-Design-System.
//
// Aufbau (immer in dieser Reihenfolge):
//   1) Allgemeine Leistungen (Trauerfall · Tiefrot · 8 Bausteine)
//   2) Banner-Checkliste · Sterbeurkunde-Unterlagen (dunkel)
//   3) Bestattungsformen (Trauerfall · vier Wege)
//   4) Vorsorge (Salbei · Festhalten · Ermitteln · Sichern · Aktualisieren)
//
// Inhalte aus ui_kits/website/* — keine Erfindung.

/* ─────────────── Icons (Lucide-Sprache, stroke 1.5) ─────────────── */

const IcHeart   = ({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 IcTruck   = ({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 IcDocs    = ({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 IcCeremony= ({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 IcMic     = ({size=22}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/></svg>);
const IcFlower  = ({size=22}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3"/><path d="M9 11c-3 0-5 2-5 4M15 11c3 0 5 2 5 4M12 11v10"/></svg>);
const IcCard    = ({size=22}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 10h18M7 15h4"/></svg>);
const IcUrn     = ({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="M8 4h8M9 4v3c-2 1-3 3-3 6 0 4 2 8 6 8s6-4 6-8c0-3-1-5-3-6V4"/></svg>);
const IcEarth   = ({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 2v8M8 6h8"/><path d="M5 14c1 5 5 8 7 8s6-3 7-8H5z"/></svg>);
const IcFire    = ({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 22c-3.3-1.7-5-4.2-5-7.2 0-3.2 2-5.4 4.2-7.4.5 2.2 1.7 3.7 3.4 4.8.2-2 .9-3.8 2.1-5.2 2 2.2 3.3 4.7 3.3 7.7 0 3.1-1.7 5.6-5 7.3"/></svg>);
const IcTree    = ({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 21v-7M8 17h8M12 3l7 9h-4l3 5H6l3-5H5l7-9z"/></svg>);
const IcWave    = ({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 4v13"/><circle cx="12" cy="5" r="2"/><path d="M7 10h10"/><path d="M5 15c1.4 3.5 4 5 7 5s5.6-1.5 7-5"/></svg>);
const IcShield  = ({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 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>);
const IcCalc    = ({size=22}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M8 7h8M8 11h2M12 11h2M16 11h0M8 15h2M12 15h2M16 15h0M8 19h2M12 19h2M16 19h0"/></svg>);
const IcCheck   = ({size=16}) => (<svg width={size} height={size} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10l4 4 8-9"/></svg>);

/* ─────────────── Daten ─────────────── */

const L_ALLGEMEIN = [
  { title:'Persönliche Begleitung', body:'Ehrliche Beratung in Ihrem Tempo — auch nach dem Abschied.',                 img:window._r('assets/photos/lily-grave.jpg'),         Icon: IcHeart },
  { title:'Überführungen',          body:'Würdevolle Überführung im In- und Ausland — wir kümmern uns.',               img:window._r('assets/photos/cemetery-evening.jpg'),   Icon: IcTruck },
  { title:'Behördengänge & Urkunden', body:'Sterbeurkunde, Versicherungen, Rentenstelle — wir koordinieren das für Sie.', img:window._r('assets/photos/financial-planning.jpg'), Icon: IcDocs },
  { title:'Trauerfeier',            body:'Wir gestalten einen würdevollen Abschied — passend zum Menschen.',           img:window._r('assets/photos/mourners-coffin.jpg'),    Icon: IcCeremony },
  { title:'Trauerredner & Musik',   body:'Auf Wunsch vermitteln wir Trauerredner, Musiker und einen warmen Empfang nach der Feier.', img:window._r('assets/photos/candle-hands.jpg'), Icon: IcMic },
  { title:'Trauerfloristik',        body:'Kränze, Gestecke, Sarg- oder Urnenschmuck — abgestimmt auf die Feier.',      img:window._r('assets/photos/flowers-rosary.jpg'),     Icon: IcFlower },
  { title:'Drucksachen & Anzeige',  body:'Trauerkarten, Zeitungsanzeige, Dankschreiben — gestaltet im persönlichen Gespräch.', img:window._r('assets/photos/coffin-flowers.jpg'), Icon: IcCard },
  { title:'Sarg & Urne',            body:'Material, Ausführung und Schmuck — schlicht, klassisch oder hochwertig.',    img:window._r('assets/photos/urn-candles.webp'),       Icon: IcUrn },
];

const L_FORMEN = [
  { title:'Erdbestattung',   body:'Der klassische Abschied mit fester Grabstätte.',           img:window._r('assets/photos/grave-autumn.jpg'),   Icon: IcEarth },
  { title:'Feuerbestattung', body:'Die häufigste Bestattungsform — individuell gestaltbar.',  img:window._r('assets/photos/urn-candles.webp'),   Icon: IcFire  },
  { title:'Waldbestattung',  body:'Naturnahe Ruhestätte im Wald.',                            img:window._r('assets/photos/tree-rose.webp'),     Icon: IcTree  },
  { title:'Seebestattung',   body:'Abschied auf dem Wasser — ruhig und würdevoll.',          img:window._r('assets/photos/sea-petals.webp'),    Icon: IcWave  },
];

const L_VORSORGE_SCHRITTE = [
  { n:1, title:'Festhalten',   body:'Sie entscheiden, wie Ihre Bestattung ablaufen soll — Form, Sarg oder Urne, Trauerfeier, Beisetzungsort. Wir halten Ihre Wünsche schriftlich fest.' },
  { n:2, title:'Ermitteln',    body:'In einem unverbindlichen Gespräch ermitteln wir den voraussichtlichen Kostenrahmen — transparent, ohne Druck.' },
  { n:3, title:'Sichern',      body:'Der Betrag wird auf einem insolvenzgesicherten Treuhandkonto hinterlegt — getrennt von unserem Betriebsvermögen.' },
  { n:4, title:'Aktualisieren',body:'Ihre Vorsorgemappe können Sie jederzeit anpassen. Sie bleibt mit Ihnen — nicht mit uns.' },
];

const L_VORSORGE_WUENSCHE = [
  'Bestattungsform', 'Sarg oder Urne', 'Trauerfeier',
  'Beisetzungsort',  'Musik & Trauerredner', 'Bezugsberechtigte',
];

const L_STERBEURKUNDE = [
  'Personalausweis der verstorbenen Person',
  'Personalausweis des Auftraggebenden',
  'Familienstammbuch, falls vorhanden',
  'Bei Verheirateten: Heiratsurkunde',
  'Bei Verwitweten: Sterbeurkunde des Ehepartners',
  'Versicherungs- oder Vorsorgeunterlagen',
  'Bestattungsverfügung, falls vorhanden',
  'Nachweis einer Grabstätte, falls vorhanden',
];

/* ─────────────── Bausteine ─────────────── */

function L_MiniCard({ title, body, img, Icon, tone = 'trauerfall' }) {
  const c = tone === 'trauerfall' ? 'var(--accent-trauerfall)' : 'var(--brand-accent)';
  return (
    <article 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 / 4', background:`url('${img}') center/cover` }}/>
      <div style={{
        width:46, height:46, borderRadius:'50%',
        background: c, color:'#fff',
        display:'flex', alignItems:'center', justifyContent:'center',
        marginTop:-23, position:'relative', zIndex:1,
        boxShadow:`0 6px 14px -6px ${tone === 'trauerfall' ? 'rgba(168,48,45,.5)' : 'rgba(199,134,101,.5)'}, 0 0 0 4px var(--surface-cool)`,
      }}><Icon size={20}/></div>
      <h4 style={{ margin:'14px 18px 0', font:'400 19px/1.2 var(--f-display)', color:'var(--ink-900)' }}>{title}</h4>
      <p style={{ margin:'8px 22px 0', fontSize:13.5, color:'var(--ink-500)', lineHeight:1.6, maxWidth:'26ch' }}>{body}</p>
      <a href="#" style={{
        marginTop:14, alignSelf:'center',
        font:'500 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color: c, textDecoration:'none',
        paddingBottom:5, borderBottom:`1px solid ${c}`,
      }}>Mehr erfahren →</a>
    </article>
  );
}

/* ─────────────── Sterbeurkunden-Banner (dunkel) ─────────────── */

function 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/candle-hands.jpg'))}) center/cover`, opacity:.22 }}/>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(120deg, rgba(31,29,28,.95) 0%, rgba(31,29,28,.78) 60%, rgba(31,29,28,.6) 100%)' }}/>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
           style={{ position:'absolute', right:'-3%', bottom:'-10%', height:380, opacity:.10, pointerEvents:'none' }}/>

      <div style={{
        position:'relative',
        maxWidth:1140, margin:'0 auto', padding:'80px var(--page-x)',
        display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:64, alignItems:'center',
      }}>
        <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:10,
          }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent-trauerfall)' }}/>
            Im Trauerfall · Sterbeurkunde
          </span>
          <h3 style={{
            margin:'20px 0 26px',
            fontFamily:'var(--f-display)', fontWeight:300,
            fontSize:36, lineHeight:1.2, letterSpacing:'-.005em',
            color:'#fff', maxWidth:'24ch',
          }}>
            Für die Beantragung der Sterbeurkunde <em style={{
              fontStyle:'normal', fontWeight:400, color:'var(--accent-trauerfall)',
            }}>benötigen wir folgende Dokumente.</em>
          </h3>

          <ul style={{
            margin:0, padding:0, listStyle:'none',
            display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px 32px',
          }}>
            {L_STERBEURKUNDE.map(t => (
              <li key={t} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                <span style={{
                  flexShrink:0, width:18, height:18, borderRadius:'50%',
                  background:'rgba(168,48,45,.18)', color:'var(--accent-trauerfall)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  marginTop:1,
                }}><IcCheck size={10}/></span>
                <span style={{ font:'300 14px/1.5 var(--f-body)', color:'rgba(255,255,255,.88)' }}>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Download-Karte */}
        <aside style={{
          padding:'36px 32px',
          background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.18)',
          textAlign:'center',
        }}>
          <div style={{
            width:64, height:64, borderRadius:'50%', margin:'0 auto 18px',
            background:'rgba(168,48,45,.22)', border:'1px solid rgba(168,48,45,.5)',
            color:'#fff',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <IcDocs size={26}/>
          </div>
          <div style={{
            font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--accent-trauerfall)', marginBottom:10,
          }}>PDF · DIN A4</div>
          <h4 style={{ margin:'0 0 10px', font:'400 22px/1.2 var(--f-display)', color:'#fff' }}>
            Checkliste herunterladen
          </h4>
          <p style={{ margin:'0 0 22px', font:'300 13px/1.6 var(--f-body)', color:'rgba(255,255,255,.7)' }}>
            Zum Ausdrucken und in Ruhe Zusammenstellen.
          </p>
          <a href="#" style={{
            display:'inline-flex', alignItems:'center', gap:10,
            font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            padding:'14px 26px',
            background:'var(--accent-trauerfall)', color:'#fff', textDecoration:'none',
            border:'1.5px solid var(--accent-trauerfall)',
            boxShadow:'0 14px 28px -10px rgba(168,48,45,.45), inset 0 1px 0 rgba(255,255,255,.18)',
          }}>
            <IcDocs size={14}/> Checkliste · PDF
          </a>
        </aside>
      </div>
    </section>
  );
}

/* ─────────────── Vorsorge-Sektion ─────────────── */

function VorsorgeBlock() {
  return (
    <section style={{ background:'var(--surface)', padding:'96px var(--page-x)', position:'relative', overflow:'hidden' }}>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
           style={{ position:'absolute', right:'-3%', bottom:'-8%', height:380, opacity:.07, pointerEvents:'none' }}/>
      <div style={{ maxWidth:1140, margin:'0 auto', position:'relative' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:24, flexWrap:'wrap', marginBottom:48 }}>
          <div>
            <ModusEyebrow tone="vorsorge" label="Modus · Vorsorge · sachlich"/>
            <h2 style={{
              margin:'14px 0 8px',
              fontFamily:'var(--f-display)', fontWeight:300,
              fontSize:44, lineHeight:1.1, letterSpacing:'-.01em',
              color:'var(--ink-900)', maxWidth:'18ch',
            }}>
              Selbst entscheiden, <em style={{ fontStyle:'normal', fontWeight:400, color:'var(--accent-vorsorge)' }}>schriftlich festgehalten.</em>
            </h2>
            <p style={{ margin:'10px 0 0', color:'var(--ink-500)', fontSize:16, lineHeight:1.7, maxWidth:'54ch' }}>
              Mit der Bestattungsvorsorge sichern Sie die Kosten und legen Ihre Wünsche fest. So entlasten Sie Ihre Angehörigen — organisatorisch wie finanziell.
            </p>
          </div>
        </div>

        {/* Vier Schritte */}
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0,
          border:'1px solid var(--line-soft)', background:'var(--surface)',
        }}>
          {L_VORSORGE_SCHRITTE.map((s, i) => (
            <div key={s.n} style={{
              padding:'30px 26px 28px',
              borderRight: i < 3 ? '1px solid var(--line-soft)' : 'none',
              background:'var(--surface)',
              position:'relative',
            }}>
              <div style={{
                width:52, height:52, borderRadius:'50%',
                background:'var(--accent-vorsorge-soft)',
                border:'1.5px solid var(--accent-vorsorge)',
                color:'var(--accent-vorsorge-ink)',
                display:'flex', alignItems:'center', justifyContent:'center',
                font:'300 22px/1 var(--f-display)', marginBottom:20,
              }}>{`0${s.n}`}</div>
              <h4 style={{ margin:0, font:'600 11px/1.2 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)' }}>
                {s.title}
              </h4>
              <p style={{ margin:'12px 0 0', color:'var(--ink-500)', fontSize:13.5, lineHeight:1.65 }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>

        {/* Wünsche + Treuhand */}
        <div style={{
          marginTop:24, display:'grid', gridTemplateColumns:'1.4fr .6fr', gap:24, alignItems:'stretch',
        }}>
          <article style={{
            background:'var(--accent-vorsorge-soft)', border:'1px solid var(--accent-vorsorge)',
            padding:'32px 36px',
          }}>
            <span style={{
              font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
              color:'var(--accent-vorsorge)',
            }}>Ihre Wünsche · sechs Felder</span>
            <h4 style={{ margin:'12px 0 18px', font:'300 26px/1.2 var(--f-display)', color:'var(--ink-900)' }}>
              Was Sie festhalten können.
            </h4>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:'12px 24px' }}>
              {L_VORSORGE_WUENSCHE.map(w => (
                <div key={w} style={{ display:'flex', alignItems:'center', gap:12 }}>
                  <span style={{
                    width:18, height:18, border:'1.5px solid var(--accent-vorsorge)',
                    background:'var(--surface)', flexShrink:0,
                  }}/>
                  <span style={{ font:'500 13px/1.3 var(--f-body)', color:'var(--ink-900)' }}>{w}</span>
                </div>
              ))}
            </div>
          </article>

          <article style={{
            background:'var(--surface)', border:'1px solid var(--line)', padding:'30px 28px',
          }}>
            <div style={{
              width:46, height:46, borderRadius:'50%',
              background:'var(--accent-vorsorge-soft)', color:'var(--accent-vorsorge-ink)',
              border:'1px solid var(--accent-vorsorge)',
              display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16,
            }}><IcShield size={20}/></div>
            <span style={{
              font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
              color:'var(--accent-vorsorge)',
            }}>Treuhand</span>
            <h4 style={{ margin:'10px 0 14px', font:'400 18px/1.25 var(--f-display)', color:'var(--ink-900)' }}>
              Insolvenz­gesichert.
            </h4>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {['Getrennt vom Betriebsvermögen', 'Verzinsung der hinterlegten Beträge', 'Im Vorsorgefall unmittelbar verfügbar'].map(p => (
                <div key={p} style={{ display:'flex', gap:10, alignItems:'flex-start', font:'300 13px/1.5 var(--f-body)', color:'var(--ink-700)' }}>
                  <span style={{
                    flexShrink:0, width:14, height:14, borderRadius:'50%',
                    background:'var(--accent-vorsorge-soft)', color:'var(--accent-vorsorge)',
                    display:'flex', alignItems:'center', justifyContent:'center', marginTop:1,
                  }}><IcCheck size={9}/></span>
                  {p}
                </div>
              ))}
            </div>
          </article>
        </div>

        {/* Kostenrechner — full width unter dem Block */}
        <article style={{
          marginTop:24,
          background:'var(--surface-ink)', color:'#fff', padding:'40px 48px',
          position:'relative', overflow:'hidden',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:32, flexWrap:'wrap',
        }}>
          <img src={window._r(window._r("assets/photos/coins-time.jpg"))} alt=""
               style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', opacity:.18, pointerEvents:'none' }}/>
          <div style={{ position:'relative', display:'flex', alignItems:'center', gap:24, flex:'1 1 auto' }}>
            <div style={{
              width:56, height:56, borderRadius:'50%', flexShrink:0,
              background:'rgba(106,120,106,.22)', color:'var(--accent-vorsorge)',
              border:'1px solid var(--accent-vorsorge)',
              display:'flex', alignItems:'center', justifyContent:'center',
            }}><IcCalc size={24}/></div>
            <div>
              <span style={{
                font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                color:'var(--accent-vorsorge)',
              }}>Kostenrechner</span>
              <h4 style={{ margin:'8px 0 6px', font:'400 26px/1.2 var(--f-display)', color:'#fff' }}>
                Eine erste Orientierung.
              </h4>
              <p style={{ margin:0, font:'300 14px/1.6 var(--f-body)', color:'rgba(255,255,255,.78)' }}>
                Ca. 2 Minuten · keine Anmeldung.
              </p>
            </div>
          </div>
          <a href="#kostenrechner" style={{
            position:'relative',
            display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10,
            font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            padding:'16px 28px',
            background:'linear-gradient(135deg, var(--accent-vorsorge), var(--accent-vorsorge-ink))',
            color:'#fff', textDecoration:'none',
            boxShadow:'0 14px 28px -10px rgba(106,120,106,.55), inset 0 1px 0 rgba(255,255,255,.18)',
          }}>
            Jetzt ermitteln →
          </a>
        </article>
      </div>
    </section>
  );
}

/* ─────────────── Seite ─────────────── */

function LeistungenKlassisch() {
  return (
    <div>
      {/* — 1 · Hero — */}
      <HeroFoto page="leistungen" style={{padding:'72px var(--page-x) 64px'}}>
        <div style={{ maxWidth:1140, margin:'0 auto', position:'relative' }}>
          <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:10,
          }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--brand-accent)' }}/>
            Unsere Leistungen
          </span>
          <h1 style={{
            fontFamily:'var(--f-body)', fontWeight:300,
            fontSize:38, lineHeight:1.15, letterSpacing:'-.015em',
            color:'var(--ink-900)', margin:'20px 0 14px', maxWidth:'18ch',
          }}>
            Wir kümmern uns um <em style={{
              fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:300,
              color:'var(--brand-accent)', fontSize:42, letterSpacing:'-.02em',
            }}>alles Weitere.</em>
          </h1>
          <p style={{ color:'var(--ink-700)', fontSize:17, lineHeight:1.7, margin:'0 0 32px', maxWidth:'54ch' }}>
            Drei Bereiche, in denen wir Sie begleiten — vom ersten Anruf bis zur Vorsorge. Ein Anruf genügt.
          </p>

          {/* Inhaltsverzeichnis — drei Tiles inline im Hero */}
          <div style={{
            display:'grid', gridTemplateColumns:'repeat(3, 1fr)',
            background:'rgba(255,255,255,.72)',
            border:'1px solid var(--line)',
          }}>
            {[
              { n:'01', label:'Im Trauerfall', sub:'acht Bausteine',  c:'var(--accent-trauerfall)' },
              { n:'02', label:'Bestattungsformen', sub:'vier Wege',   c:'var(--accent-trauerfall)' },
              { n:'03', label:'Vorsorge', sub:'vier Schritte',         c:'var(--accent-vorsorge)' },
            ].map((tile, i) => (
              <a key={tile.n} href={`#sek-${tile.n}`} style={{
                padding:'18px 22px', textDecoration:'none',
                display:'flex', alignItems:'center', gap:14,
                borderRight: i < 2 ? '1px solid var(--line)' : 'none',
              }}>
                <span style={{ font:'300 28px/1 var(--f-display)', color: tile.c, letterSpacing:'-.02em' }}>{tile.n}</span>
                <span>
                  <span style={{ display:'block', font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-900)' }}>{tile.label}</span>
                  <span style={{ display:'block', marginTop:6, font:'400 13px/1 var(--f-script)', color: tile.c }}>{tile.sub}</span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </HeroFoto>

      {/* Breadcrumb */}
      <div style={{padding:'14px var(--page-x)', background:'var(--surface-paper)', borderTop:'1px solid var(--line-soft)', borderBottom:'1px solid var(--line-soft)', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-warm-mute)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <a href="#" style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--brand-accent)'}}>Leistungen</span>
        </div>
      </div>

      {/* — 2 · Allgemeine Leistungen (Trauerfall · Tiefrot) — */}
      <section id="sek-01" style={{ background:'var(--surface)', padding:'96px var(--page-x) 80px' }}>
        <div style={{ maxWidth:1140, margin:'0 auto' }}>
          <div style={{ marginBottom:56 }}>
            <ModusEyebrow tone="trauerfall" label="Modus · Trauerfall · warm"/>
            <h2 style={{
              margin:'14px 0 8px',
              fontFamily:'var(--f-display)', fontWeight:300,
              fontSize:44, lineHeight:1.1, letterSpacing:'-.01em',
              color:'var(--ink-900)',
            }}>
              Im Trauerfall — <em style={{ fontStyle:'normal', fontWeight:400, color:'var(--accent-trauerfall)' }}>unsere Leistungen.</em>
            </h2>
            <p style={{ margin:'10px 0 0', color:'var(--ink-500)', fontSize:16, lineHeight:1.7, maxWidth:'54ch' }}>
              Acht Bausteine, die ineinandergreifen. Wir nehmen Ihnen die ersten Sorgen ab und begleiten Sie Schritt für Schritt.
            </p>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18 }}>
            {L_ALLGEMEIN.map(l => <L_MiniCard key={l.title} {...l} tone="trauerfall"/>)}
          </div>
        </div>
      </section>

      {/* — 3 · Sterbeurkunden-Banner (dunkel) — */}
      <SterbeurkundeBanner/>

      {/* — 4 · Bestattungsformen (Trauerfall · Tiefrot) — */}
      <section id="sek-02" style={{ background:'var(--surface-paper)', padding:'96px var(--page-x) 80px', borderBottom:'1px solid var(--line)' }}>
        <div style={{ maxWidth:1140, margin:'0 auto' }}>
          <div style={{ marginBottom:56 }}>
            <ModusEyebrow tone="trauerfall" label="Modus · Trauerfall"/>
            <h2 style={{
              margin:'14px 0 10px',
              fontFamily:'var(--f-display)', fontWeight:300,
              fontSize:44, lineHeight:1.1, letterSpacing:'-.01em',
              color:'var(--ink-900)',
            }}>
              Eine Form, <em style={{ fontStyle:'normal', fontWeight:400, color:'var(--accent-trauerfall)' }}>die zu Ihnen passt.</em>
            </h2>
            <p style={{ margin:'10px 0 0', color:'var(--ink-500)', fontSize:16, lineHeight:1.7, maxWidth:'60ch' }}>
              Vier Wege, Abschied zu nehmen — wir beraten Sie persönlich und finden gemeinsam die Form, die zu Ihrem Wunsch und zu Ihrer Familie passt.
            </p>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18 }}>
            {L_FORMEN.map(l => <L_MiniCard key={l.title} {...l} tone="trauerfall"/>)}
          </div>
        </div>
      </section>

      {/* — 5 · Vorsorge (Salbei) — */}
      <div id="sek-03">
        <VorsorgeBlock/>
      </div>

      {/* — 6 · CTA — */}
      <section style={{ background:'var(--surface-warm)', padding:'72px var(--page-x)', borderTop:'1px solid var(--line)' }}>
        <div style={{
          maxWidth:1140, margin:'0 auto',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:32, flexWrap:'wrap',
        }}>
          <div>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)',
            }}>Wir beraten Sie persönlich</span>
            <h3 style={{
              margin:'14px 0 0', font:'300 36px/1.2 var(--f-display)',
              color:'var(--ink-900)', letterSpacing:'-.01em', maxWidth:'26ch',
            }}>
              In Ruhe und nach <em style={{ fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400 }}>Ihrem Tempo.</em>
            </h3>
          </div>
          <div style={{ display:'flex', gap:14, alignItems:'center', flexWrap:'wrap' }}>
            <Button variant="ghost">Termin vereinbaren</Button>
            <PhoneCTA/>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LeistungenKlassisch, SterbeurkundeBanner, VorsorgeBlock });
