function Leistungen() {
  const offers = [
    {icon: 'clipboard-list', t: 'Portfolioanalysen',     b: 'Strukturierte Aufnahme von Zustand, Energiebedarf und Sanierungsbedarf — pro Liegenschaft, vergleichbar im Portfolio.'},
    {icon: 'route',          t: 'Sanierungsfahrpläne',   b: 'Priorisierter Maßnahmenplan über das gesamte Portfolio — abgestimmt auf Haushalt und Förderfenster.'},
    {icon: 'network',        t: 'Netzkonzepte (BEW)',    b: 'Wärmenetze von der Machbarkeit bis zur BEW-Förderung — Trassen, Erzeuger, Wirtschaftlichkeit.'},
    {icon: 'hard-hat',       t: 'Umsetzungsplanung',     b: 'Ausschreibung, Vergabe, Bauüberwachung. Wir entlasten Ihr Bauamt bis zur Inbetriebnahme.'},
    {icon: 'banknote',       t: 'Fördermittelabwicklung',b: 'BAFA, KfW, BEW, Landesprogramme — Antragsstellung, Mittelabruf, Verwendungsnachweis.'},
    {icon: 'calculator',     t: 'Finanzierungskonzepte', b: 'Eigenmittel, Förderquote, Contracting-Modelle — wir rechnen die Kombination, die Sie tragen können.'},
  ];
  return (
    <section id="leistungen" style={{padding: '112px 32px', background: '#fff'}}>
      <div style={{maxWidth: 1280, margin: '0 auto'}}>
        <div style={{maxWidth: 760, marginBottom: 56}}>
          <div className="ep-eyebrow" style={{marginBottom: 16}}>Leistungen</div>
          <h2 style={{fontFamily: 'Montserrat', fontWeight: 500, fontSize: 40, lineHeight: 1.2, color: '#262626', margin: '0 0 20px', letterSpacing: '-0.01em'}}>
            Sechs Bausteine — einzeln oder gebündelt.
          </h2>
        </div>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20}}>
          {offers.map(o => (
            <div key={o.t} style={{
              border: '1px solid #E6E6E6', borderRadius: 16, padding: 28, background: '#fff',
              transition: 'box-shadow 200ms cubic-bezier(.2,.8,.2,1), border-color 200ms',
            }}
              onMouseOver={e => { e.currentTarget.style.boxShadow = '0 8px 24px rgba(14,77,42,0.10), 0 2px 6px rgba(14,77,42,0.05)'; e.currentTarget.style.borderColor = '#CCCCCC'; }}
              onMouseOut={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = '#E6E6E6'; }}
            >
              <div style={{width: 48, height: 48, borderRadius: 12, background: '#E6F5EC', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18}}>
                <i data-lucide={o.icon} style={{width: 24, height: 24, strokeWidth: 1.75, color: '#009947'}}></i>
              </div>
              <h3 style={{fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 22, lineHeight: 1.2, color: '#262626', margin: '0 0 10px'}}>
                {o.t}
              </h3>
              <p style={{fontSize: 14, lineHeight: 1.55, color: '#4D4D4D', margin: 0}}>{o.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Leistungen = Leistungen;