function Differenzierung() {
  const rows = [
    {them: 'Konzept liefert, Umsetzung bleibt offen', us: 'Wir bleiben an Bord bis zur Inbetriebnahme'},
    {them: 'Förderhinweise im Anhang',                 us: 'Wir stellen die Anträge und sichern die Mittel'},
    {them: 'Generische Maßnahmenkataloge',             us: 'Priorisiert nach Ihrem Haushalt und Förderfenster'},
    {them: 'Externes Wissen, lose verbunden',          us: 'Eine Ansprechperson, durchgehend'},
    {them: 'Berichte für die Akte',                    us: 'Beschlussfähige Unterlagen für den Gemeinderat'},
  ];
  return (
    <section id="differenzierung" style={{padding: '112px 32px', background: '#fff'}}>
      <div style={{maxWidth: 1280, margin: '0 auto'}}>
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'flex-start'}}>
          <div style={{position: 'sticky', top: 100}}>
            <div className="ep-eyebrow" style={{marginBottom: 16}}>Warum Effizienzpioniere</div>
            <h2 style={{
              fontFamily: 'Montserrat', fontWeight: 500, fontSize: 40, lineHeight: 1.2,
              color: '#262626', margin: '0 0 20px', letterSpacing: '-0.01em',
            }}>
              Analyse, Strategie und Umsetzung — aus einer Hand.
            </h2>
            <p style={{fontSize: 16, color: '#4D4D4D', margin: '0 0 24px', lineHeight: 1.55}}>
              Wir kennen die Realität kommunaler Verwaltung. Genau hier setzen wir an.
            </p>
            <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14}}>
              {[
                {i: 'building-2',  t: 'Über 40 kommunale Liegenschaften begleitet'},
                {i: 'graduation-cap', t: 'Ingenieursexpertise mit Start-up-Spirit'},
                {i: 'handshake', t: 'Partnerschaftlich, pragmatisch, dauerhaft'},
              ].map(x => (
                <li key={x.t} style={{display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, fontWeight: 500, color: '#262626'}}>
                  <span style={{width: 32, height: 32, borderRadius: 9999, background: '#E6F5EC', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0}}>
                    <i data-lucide={x.i} style={{width: 16, height: 16, strokeWidth: 1.75, color: '#009947'}}></i>
                  </span>
                  {x.t}
                </li>
              ))}
            </ul>
          </div>

          <div style={{borderRadius: 16, border: '1px solid #E6E6E6', overflow: 'hidden'}}>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid #E6E6E6'}}>
              <div style={{padding: '20px 24px', background: '#F6F6F6'}}>
                <div className="ep-eyebrow" style={{color: '#808080', marginBottom: 6}}>Klassische Beratung</div>
                <div style={{fontFamily: 'Montserrat', fontWeight: 600, fontSize: 16, color: '#4D4D4D'}}>liefert Konzepte</div>
              </div>
              <div style={{padding: '20px 24px', background: '#E6F5EC'}}>
                <div className="ep-eyebrow" style={{marginBottom: 6}}>Effizienzpioniere</div>
                <div style={{fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 16, color: '#0E4D2A'}}>liefern Ergebnisse</div>
              </div>
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: i === 0 ? 'none' : '1px solid #E6E6E6'}}>
                <div style={{padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12, color: '#808080', fontSize: 14, lineHeight: 1.4}}>
                  <i data-lucide="x" style={{width: 16, height: 16, strokeWidth: 2, flexShrink: 0}}></i>
                  {r.them}
                </div>
                <div style={{padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12, color: '#262626', fontSize: 14, fontWeight: 500, lineHeight: 1.4, background: 'rgba(230,245,236,0.4)'}}>
                  <i data-lucide="check" style={{width: 16, height: 16, strokeWidth: 2.25, color: '#009947', flexShrink: 0}}></i>
                  {r.us}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Differenzierung = Differenzierung;