function UeberUns() {
  return (
    <section id="ueber" className="ueber-section" style={{background:"var(--paper)", padding:"140px 40px"}}>
      <div className="ueber-grid" style={{maxWidth:1320, margin:"0 auto", display:"grid", gridTemplateColumns:"0.95fr 1.05fr", gap: 100, alignItems:"center"}}>
        
        {/* Left: portrait/scene plate */}
        <div style={{position:"relative"}}>
          <div style={{
            aspectRatio:"4/5", width:"100%",
            background:`
              linear-gradient(180deg, #d6cfbe 0%, #ebe3d4 100%)
            `,
            border:"1px solid var(--line)",
            position:"relative",
            display:"flex", flexDirection:"column", justifyContent:"flex-end",
            padding: 28,
            overflow:"hidden",
          }}>
            {/* Stadthafen photo — focus on building */}
            <img src={window.__resources?.hafenImg || "assets/hafen.jpg"} alt="Stadthafen Leipzig"
              style={{
                position:"absolute", inset:0, width:"100%", height:"100%",
                objectFit:"cover", objectPosition:"center 30%",
                clipPath:"inset(0 0 0 0)",
              }}/>

            {/* Caption pill */}
            <div style={{
              position:"relative", zIndex:2,
              background:"var(--paper)", padding:"18px 24px",
              border:"1px solid var(--line)",
              maxWidth: 280,
            }}>
              <div className="serif" style={{fontSize:11, letterSpacing:"0.32em", color:"var(--gold)", textTransform:"uppercase", marginBottom:6, fontStyle:"italic"}}>
                Unser Liegeplatz
              </div>
              <div className="serif" style={{fontSize: 20, color:"var(--navy)", fontWeight:500, lineHeight:1.2}}>
                Stadthafen Leipzig<br/>
                <span style={{fontStyle:"italic", fontSize: 14, color:"rgba(10,24,40,0.6)"}}>
                  Tor zum Neuseenland
                </span>
              </div>
            </div>
          </div>

          {/* Side ornament */}
          <div style={{position:"absolute", top:24, right:-12, writingMode:"vertical-rl", transform:"rotate(180deg)"}}>
            <span className="serif" style={{fontSize:11, letterSpacing:"0.4em", color:"var(--gold)", textTransform:"uppercase", fontStyle:"italic"}}>
              
            </span>
          </div>
        </div>

        {/* Right: text */}
        <div>
          <div className="sans" style={{fontSize:11, letterSpacing:"0.4em", textTransform:"uppercase", color:"var(--gold)", fontWeight:600, marginBottom:18}}>
            Über uns
          </div>
          <h2 className="serif" style={{fontSize:"clamp(36px, 4vw, 60px)", lineHeight:1.05, color:"var(--navy)", fontWeight:500, marginBottom: 32}}>
            Lokal in Leipzig verwurzelt.<br/>
            <span style={{fontStyle:"italic", color:"var(--gold)"}}>Auf allen Weltmeeren zuhause.</span>
          </h2>
          
          <p className="serif" style={{fontSize: 19, lineHeight: 1.65, color:"rgba(10,24,40,0.78)", marginBottom: 24}}>
            Agater <span style={{color:"var(--gold)"}}>⚓</span> Klisa — das sind zwei Versicherungsmakler,
            die selbst auf den Leipziger Gewässern zuhause sind und doch weit darüber
            hinaus denken. Vom kleinen Schlauchboot auf dem Cospudener See bis zur
            Hochseeyacht im Mittelmeer oder in der Karibik: wir kennen jedes Revier,
            jeden Liegeplatz, jeden Sturm.
          </p>

          <p className="serif" style={{fontSize: 19, lineHeight: 1.65, color:"rgba(10,24,40,0.78)", marginBottom: 40}}>
            Unser Büro liegt — wie sollte es anders sein — direkt am
            Stadthafen Leipzig. Hier beraten wir persönlich, nehmen uns Zeit für
            jedes Schiff und jede Geschichte. Denn ein Boot ist mehr als
            ein Vermögensgegenstand. Es ist eine Leidenschaft.
          </p>

          {/* Quote */}
          <div style={{
            borderLeft:"2px solid var(--gold)", paddingLeft: 28, marginBottom: 40,
          }}>
            <div className="serif" style={{fontSize: 22, lineHeight: 1.5, color:"var(--navy)", fontStyle:"italic", marginBottom: 12}}>
              „Wer auf das Wasser geht, braucht zwei Anker:<br/>
              einen am Heck — und einen am Vertrag."
            </div>
            <div className="sans" style={{fontSize: 11, letterSpacing:"0.28em", color:"rgba(10,24,40,0.55)", textTransform:"uppercase"}}>
              — Hausmotto
            </div>
          </div>

          {/* Mini-facts */}
          <div className="ueber-facts" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 20, paddingTop: 28, borderTop:"1px solid var(--line)"}}>
            <div>
              <div className="serif" style={{fontSize: 32, color:"var(--gold)", fontWeight:500, fontStyle:"italic", lineHeight:1}}>2016</div>
              <div className="sans" style={{fontSize:11, letterSpacing:"0.2em", color:"rgba(10,24,40,0.6)", marginTop:8, textTransform:"uppercase"}}>Gegründet</div>
            </div>
            <div>
              <div className="serif" style={{fontSize: 32, color:"var(--gold)", fontWeight:500, fontStyle:"italic", lineHeight:1}}>10 000+</div>
              <div className="sans" style={{fontSize:11, letterSpacing:"0.2em", color:"rgba(10,24,40,0.6)", marginTop:8, textTransform:"uppercase"}}>Verträge betreut</div>
            </div>
            <div>
              <div className="serif" style={{fontSize: 32, color:"var(--gold)", fontWeight:500, fontStyle:"italic", lineHeight:1}}>23</div>
              <div className="sans" style={{fontSize:11, letterSpacing:"0.2em", color:"rgba(10,24,40,0.6)", marginTop:8, textTransform:"uppercase"}}>Reviere · Neuseenland</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.UeberUns = UeberUns;