function Hero() {
  return (
    <section className="hero" style={{ padding: '40px 0 32px', background: '#fff' }}>
      <div className="container">
        <div className="hero-avatar" style={{ width: 88, height: 88, borderRadius: '50%', overflow: 'hidden', marginBottom: 20, boxShadow: '0 8px 24px rgba(17,1,150,0.12)', border: '2px solid #fff' }}>
          <img src="assets/philipp.png" alt="Philipp Raasch" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
        </div>
        <div className="section-eyebrow" style={{ marginBottom: 16 }}>
          <span className="kicker-line"></span>Mit mir zusammenarbeiten
        </div>
        <h1 className="hero-title section-title" style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 500, lineHeight: 1.1, maxWidth: 800 }}>
          Wie wollen wir <em style={{ color: 'var(--ap-blue)', fontStyle: 'italic', fontWeight: 500 }}>zusammenarbeiten</em>?
        </h1>
      </div>
    </section>
  );
}
window.Hero = Hero;