const ClevelandBlock = () => (
  <section className="v-section v-section-alt" id="cleveland" data-screen-label="07 Cleveland">
    <SectionHeader
      eyebrow="Marktbeispiel · Cleveland, Ohio"
      headline={`Warum Cleveland,<br/>und nicht <em>irgendein</em> US-Markt`}
      sub="Ein konkreter Markt macht die abstrakte These greifbar. Cleveland steht stellvertretend für eine Kategorie von Midwest-Märkten, in denen Kaufpreise, Mieten und Betriebskosten noch in einem funktionierenden Verhältnis zueinander stehen."
    />
    <div className="v-cleveland-layout">
      <div>
        <p className="v-body" style={{marginBottom:16}}><span className="v-cleveland-drop">C</span>leveland ist kein glamouröser Markt. Es ist kein Wachstumsstar wie Austin, kein Tech-Hub wie San Francisco, kein Lifestyle-Markt wie Miami. Und genau das ist der Punkt.</p>
        <p className="v-body" style={{marginBottom:16}}>In Märkten, die Anleger nicht als aufregend wahrnehmen, entstehen manchmal die solidesten Cashflow-Kalkulationen. Der mediane Kaufpreis lag im März 2026 bei rund <strong style={{color:'var(--v-ink-soft)',fontWeight:500}}>135.000 USD</strong>. Die durchschnittliche Miete in der Stadt liegt bei etwa <strong style={{color:'var(--v-ink-soft)',fontWeight:500}}>1.228 USD pro Monat</strong> (April 2026). Das ergibt eine Rohkalkulation, die in deutschen Großstädten schlicht nicht existiert.</p>
        <p className="v-body" style={{marginBottom:16}}>Häuser werden im Schnitt innerhalb von 33 Tagen verkauft — ein Zeichen für funktionierenden Markt, nicht für ein leeres Terrain. Die US-Bundesbehörde HUD beschreibt den breiteren Cleveland-Elyria-Mietmarkt als ausgewogen, mit einer Leerstandsquote von rund 8,3 %. Cleveland-Mieten liegen rund <strong style={{color:'var(--v-bordeaux)',fontWeight:500}}>39 % unter dem US-Landesschnitt</strong> — was den Markt erschwinglich für Mieter macht und damit die Nachfragelogik stützt.</p>
        <p className="v-body">Das bedeutet nicht, dass jedes Objekt in Cleveland eine sinnvolle Investition ist. Lage, Objektqualität und Mieternachfrage variieren stark nach Stadtviertel. Selektives Underwriting ist entscheidend — Pauschalkäufe in einem unbekannten Markt sind keine Strategie.</p>
      </div>
      <div className="v-cleveland-data">
        <div className="v-cleveland-head">
          <div className="v-cleveland-head-left">
            <div className="v-h5" style={{fontSize:22}}>Cleveland</div>
            <div className="v-label">Ohio · Cuyahoga County</div>
          </div>
          <div className="v-label" style={{color:'var(--v-bordeaux)'}}>März 2026</div>
        </div>
        {[
          ['Ø Kaufpreis (Median)','135.000 $'],
          ['Ø Miete / Monat','1.228 $'],
          ['Leerstandsquote','8,3 %'],
          ['Tage auf Markt','33 T.'],
          ['Preis unter US-Schnitt','−39 %'],
        ].map(([l,v],i)=>(
          <div key={i} className="v-cleveland-metric">
            <span className="v-cleveland-metric-label">{l}</span>
            <span className="v-cleveland-val">{v}</span>
          </div>
        ))}
        <div className="v-cleveland-source">Alle Marktdaten basieren auf verfügbaren öffentlichen Quellen und Marktberichten (Stand: März–April 2026, HUD Housing Market Analysis Cleveland-Elyria). Immobilienmarktdaten sind Momentaufnahmen und ändern sich. Sie dienen als Kontextualisierung, nicht als Renditeprognose.</div>
      </div>
    </div>
  </section>
);

const Steps = () => {
  const [open, setOpen] = React.useState(-1);
  const STEPS = [
    ['01','Schritt','Strategiegespräch & Investor-Readiness','Im ersten Gespräch klären wir gemeinsam, ob ein US-Investment zu deiner Situation passt — Kapital, Zeithorizont, Risikoprofil und Erwartungen. Virtorum ist selektiv. Nicht jeder Investor ist der richtige Partner für diesen Ansatz.',['Analyse der Investorensituation','Kapital- und Finanzierungsstruktur besprechen','Entscheidungsgrundlage klären']],
    ['02','Schritt','Setup & Strukturierung','Bevor Kapital fließt, muss die Struktur stehen: Steuerliche Struktur, LLC-Gründung, US-Bankkonto. Wir begleiten diesen Prozess mit spezialisierten Partnern — damit die Basis stimmt.',['Steuerliche Grundstruktur mit US-Berater','LLC-Gründung in geeignetem Bundesstaat','US-Bankkonto für ausländische Investoren']],
    ['03','Schritt','Markt- und Dealauswahl','Wir analysieren Märkte systematisch auf Mieternachfrage, Preisniveau, Betriebskosten und Leerstandsentwicklung. Deals werden vorqualifiziert, Sie bekommen nur ausgewählte Objekte mit klarer Cashflow-Logik.',['Marktanalyse nach klar definierten Kriterien','Vorqualifizierte Deals aus lokalen Netzwerken','Renovierungskosten, Cashflow und Betriebskosten im Fokus']],
    ['04','Schritt','Deal-Analyse & Entscheidungsgrundlage','Jedes Objekt wird strukturiert aufbereitet: Mietrendite, Nettocashflow nach Kosten, Lageprofil und Risikoeinschätzung. Du entscheidest auf Basis echter Zahlen.',['Vollständige Finanzanalyse','Unabhängige Inspection','Unabhängiges Bankgutachten (Appraisal)']],
    ['05','Schritt','Transaktionsbegleitung & Übergabe','Vom Kaufangebot bis zur Übergabe an das lokale Property Management koordinieren wir alle Beteiligten — Makler, Anwälte, Gutachter, Verwalter. Du kaufst remote, ohne Kontrollverlust und ohne stille Überraschungen.',['Closing-Begleitung (remote möglich)','Koordinierung von Renovierungsarbeiten','Übergabe an lokales Property Management']],
  ];
  return (
  <section className="v-section" id="prozess" data-screen-label="08 Prozess">
    <SectionHeader
      eyebrow="Wie es funktioniert"
      headline={`Wie Virtorum <em>funktioniert</em>`}
      sub="Das eigentliche Problem ist nicht das Finden einer Immobilie. Es ist der Marktzugang, das Setup, die Analyse und die Abwicklung. Virtorum löst genau das."
    />
    <div className="v-steps">
      {STEPS.map(([n,slabel,t,b,details],i)=>(
        <div key={i} className={`v-step ${open===i?'is-open':''}`}>
          <div className="v-step-num">
            <div className="v-step-num-i">{n}</div>
            <div className="v-step-num-label">{slabel}</div>
          </div>
          <div className="v-step-content">
            <div className="v-h4">{t}</div>
            <p className="v-body-sm" style={{marginTop:12}}>{b}</p>
            <button type="button" className="v-step-toggle" onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
              <span>Was dabei passiert</span>
              <span className="v-step-toggle-icon">{open===i?'−':'+'}</span>
            </button>
            {open===i && (
              <div className="v-step-mobile-detail">
                {details.map((d,j)=><div key={j} className="v-step-item">{d}</div>)}
              </div>
            )}
          </div>
          <div className="v-step-detail">
            <div className="v-step-detail-label">Was dabei passiert</div>
            {details.map((d,j)=><div key={j} className="v-step-item">{d}</div>)}
          </div>
        </div>
      ))}
    </div>
  </section>
  );
};

const QualifyGrid = () => {
  const yesItems = [
    'Du über ca. 60.000 € oder mehr Eigenkapital verfügst, das du langfristig investieren willst.',
    'Du cashflow-orientiert denkst und Wertsteigerungsversprechen skeptisch gegenüberstehst.',
    'Du verstehst, dass Investieren Prozess braucht — Setup, Analyse, Abwicklung, Verwaltung.',
    'Du bereit bist, einen strukturierten Weg zu gehen statt schnell und intuitiv zu entscheiden.',
    'Du in Deutschland oder im Ausland lebst und einen remote-fähigen Ansatz benötigst.',
    'Du mittel- bis langfristig ein kleines Portfolio aufbauen willst — nicht nur ein einmaliges Objekt kaufen.',
  ];
  const noItems = [
    'Du nach garantierten Renditen oder risikofreien Investments suchst. Die gibt es nicht.',
    'Du schnelle Gewinne oder kurzfristige Spekulation erwartest. Das ist nicht unser Ansatz.',
    'Du kein Interesse an Prozess und Struktur hast und einfach „irgendwie" in die USA einsteigen willst.',
    'Du unter finanziellem Druck stehst und deshalb hohe Renditen brauchst. Das ist kein geeignetes Setup.',
    'Du unrealistische Cashflow-Erwartungen mitbringst, die keine solide Kalkulation stützt.',
    'Du nicht bereit bist, Zeit in das Verständnis des Prozesses und der Märkte zu investieren.',
  ];
  return (
  <section className="v-section v-qualify-section on-dark" data-screen-label="09 Für wen">
    <SectionHeader
      eyebrow="Für wen · für wen nicht"
      headline={`Für wen Virtorum geeignet ist —<br/><em>und für wen nicht</em>`}
      sub="Wir sind nicht für jeden Investor der richtige Partner. Das ist kein Marketingtrick — es ist eine ehrliche Einschätzung, die beiden Seiten Zeit spart."
    />
    <div className="v-qualify-cards">
      <div className="v-qualify-card v-qualify-card-yes">
        <div className="v-qualify-card-head">
          <div className="v-qualify-card-tag">
            <span className="v-qualify-card-mark">✓</span>
            <span>Geeignet</span>
          </div>
          <div className="v-qualify-card-title">Virtorum ist für dich geeignet, wenn…</div>
        </div>
        <div className="v-qualify-card-list">
          {yesItems.map((text,i)=>(
            <div key={i} className="v-qualify-item v-qualify-item-yes">
              <span className="v-qualify-item-icon">✓</span>
              <span className="v-qualify-item-text">{text}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="v-qualify-card v-qualify-card-no">
        <div className="v-qualify-card-head">
          <div className="v-qualify-card-tag">
            <span className="v-qualify-card-mark">×</span>
            <span>Nicht geeignet</span>
          </div>
          <div className="v-qualify-card-title">Virtorum ist nicht für dich geeignet, wenn…</div>
        </div>
        <div className="v-qualify-card-list">
          {noItems.map((text,i)=>(
            <div key={i} className="v-qualify-item v-qualify-item-no">
              <span className="v-qualify-item-icon">×</span>
              <span className="v-qualify-item-text">{text}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
  );
};

const Team = () => (
  <section className="v-section v-section-alt" id="team" data-screen-label="10 Team">
    <SectionHeader eyebrow="Das Team" headline={`Gegründet von <em>Praktikern</em>`}/>
    <div className="v-team-layout">
      <div className="v-team-left">
        <div className="v-team-img-wrap">
          <img src="./img/team-bg.webp?v=2" alt="Das Virtorum-Team" style={{width:'100%',display:'block'}} />
          <div className="v-team-caption">
            <span>Immanuel &amp; Kilian</span>
            <span className="v-team-caption-sub">Co-Founder</span>
          </div>
        </div>
        <p className="v-body v-team-intro">Virtorum entstand aus der gleichen Erfahrung, die viele deutsche Investoren machen: strukturelle Grenzen im Heimatmarkt — und die Suche nach einem funktionierenden System jenseits des Atlantiks.</p>
      </div>
      <div className="v-team-right">
        <div className="v-team-cards">
          <div className="v-team-card">
            <div className="v-team-card-head">
              <span className="v-team-card-num">01</span>
              <span className="v-team-card-role">Strategie & Investorenbegleitung</span>
            </div>
            <div className="v-team-card-name">Immanuel<span>, Co-Founder</span></div>
            <p className="v-body-sm v-team-card-body">Verantwortlich für Investorenstrategie, Marktpositionierung und das Erstgesprächsprogramm. Bringt Erfahrung in der Strukturierung internationaler Immobilieninvestitionen mit.</p>
          </div>
          <div className="v-team-card">
            <div className="v-team-card-head">
              <span className="v-team-card-num">02</span>
              <span className="v-team-card-role">Deal-Analyse & Transaktionen</span>
            </div>
            <div className="v-team-card-name">Kilian<span>, Co-Founder</span></div>
            <p className="v-body-sm v-team-card-body">Zuständig für Dealqualifizierung, Finanzmodellierung und operative Transaktionsbegleitung. Koordiniert lokale Partner, Property Manager und Rechtsdienstleister im US-Markt.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    ['Ab welchem Kapital ist Virtorum sinnvoll?','In der Regel ab ca. 60.000 € Eigenkapital. Das ist nicht willkürlich: Darunter wird es schwierig, eine solide Finanzierungsstruktur aufzusetzen, ausreichend Reserven zu halten und trotzdem auf einen Cashflow-positiven Kauf zu kommen. Mit deutlich mehr Kapital — oder bei Interesse an mehreren Objekten — entstehen andere Strukturierungsmöglichkeiten, die wir individuell besprechen.'],
    ['Muss ich in die USA reisen?','Nein. Der gesamte Prozess ist remote durchführbar — von der LLC-Gründung über die Deal-Analyse bis zum Closing. Wir haben lokale Partner vor Ort, die alle physischen Schritte koordinieren. Eine Reise ist möglich und für manche Investoren wünschenswert — aber strukturell nicht notwendig.'],
    ['Wie funktioniert die LLC-Struktur für deutsche Investoren?','Die LLC (Limited Liability Company) ist die übliche Struktur für ausländische Immobilienkäufer in den USA. Sie bietet Haftungsbeschränkung, steuerliche Effizienz und Flexibilität. Wir begleiten die Gründung — und arbeiten mit spezialisierten US-Steuerberatern zusammen, die Erfahrung mit internationalen Investoren haben. Wichtig: Steuerliche Beratung erfordert individuelle Einschätzung — pauschale Empfehlungen machen wir nicht.'],
    ['Sind US-Immobilien risikofrei?','Nein. Kein Immobilienmarkt ist risikofrei. Mietausfälle passieren. Märkte verändern sich. Objekte haben Instandhaltungsbedarf. Wechselkursrisiken zwischen USD und EUR existieren. Wir minimieren Risiken durch sorgfältige Markt- und Objektauswahl — aber wir versprechen keine risikofreien Ergebnisse. Wer das sucht, ist bei uns falsch.'],
 ];
  return (
    <section className="v-section" id="faq" data-screen-label="11 FAQ">
      <SectionHeader eyebrow="Häufige Fragen" headline={`Was Investoren<br/><em>wirklich wissen wollen</em>`}/>
      <div className="v-faq-list">
        {items.map(([q,a],i)=>(
          <div key={i} className={`v-faq-item ${open===i?'open':''}`}>
            <div className="v-faq-q" onClick={()=>setOpen(open===i?-1:i)}>
              {q}<div className="v-faq-toggle">+</div>
            </div>
            {open===i && <div className="v-faq-a">{a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
};

const CTA = ({ onBook }) => (
  <section className="v-cta v-cta-centered" id="cta" data-screen-label="12 CTA">
    <div className="v-cta-inner">
      <div className="v-cta-eyebrow">
        <span className="v-cta-eyebrow-line"/>Der nächste Schritt<span className="v-cta-eyebrow-line"/>
      </div>
      <h2 className="v-h1" style={{color:'var(--v-paper)', textAlign:'center'}}>Bereit für ein<br/><em style={{color:'var(--v-brass)',fontStyle:'normal'}}>unverbindliches Gespräch?</em></h2>
      <p className="v-body v-cta-lede">45 Minuten, in denen <strong style={{color:'var(--v-paper)',fontWeight:400}}>beide Seiten Klarheit gewinnen</strong>. Wir schauen, ob ein US-Investment zu deiner Situation passt — und du bekommst ein Gefühl dafür, ob Virtorum der richtige Partner für die Umsetzung ist. Nicht jede Strategie ist für jeden Anleger sinnvoll. Genau das klären wir im Gespräch.</p>
      <div className="v-cta-actions">
        <a className="v-btn-cta" href="/deals">Deals ansehen →</a>
        <button className="v-btn-cta v-btn-cta-ghost" onClick={onBook}>Erstgespräch buchen</button>
      </div>
    </div>
  </section>
);

const LegalModal = ({ open, onClose, eyebrow, title, children }) => {
  if (!open) return null;
  return (
    <div className="v-legal-overlay" onClick={onClose}>
      <div className="v-legal-modal" onClick={e => e.stopPropagation()}>
        <button className="v-legal-close" onClick={onClose} aria-label="Schließen">×</button>
        <div className="v-legal-eyebrow">{eyebrow}</div>
        <h2 className="v-legal-title">{title}</h2>
        <div className="v-legal-body">{children}</div>
      </div>
    </div>
  );
};

const Footer = () => {
  const [modal, setModal] = React.useState(null);
  return (
    <>
      <footer className="v-footer">
        <div className="v-footer-logo">
          <svg width="16" height="12" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="miter">
            <path d="M1 1L11 15L21 1"/><path d="M6 1L11 8L16 1"/>
          </svg>
          VIRTORUM
        </div>
        <div className="v-footer-links">
          <a href="#problem">Das Problem</a>
          <a href="#fallstudien">Fallstudien</a>
          <a href="#team">Team</a>
          <a href="#faq">FAQ</a>
          <a onClick={() => setModal('impressum')}>Impressum</a>
          <a onClick={() => setModal('datenschutz')}>Datenschutz</a>
        </div>
        <div className="v-footer-copy">© 2026 Virtorum. Alle Rechte vorbehalten.</div>
      </footer>

      <LegalModal
        open={modal === 'impressum'}
        onClose={() => setModal(null)}
        eyebrow="Rechtliche Angaben"
        title="Impressum"
      >
        <div className="v-legal-section">
          <div className="v-legal-label">Anbieter</div>
          <p>
            <strong>VIRTORUM LLC</strong><br/>
            7901 4th St N Ste 300<br/>
            St. Petersburg, FL 33702<br/>
            Vereinigte Staaten von Amerika
          </p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Kontakt</div>
          <p>E-Mail: <a href="mailto:info@virtorum.com">info@virtorum.com</a></p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Rechtsform</div>
          <p>Limited Liability Company (LLC) nach dem Recht des Bundesstaates Florida, USA.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Haftungsausschluss</div>
          <p>Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte wird jedoch keine Gewähr übernommen. Die Inhalte stellen keine Anlage-, Rechts- oder Steuerberatung dar. Immobilieninvestitionen sind mit Risiken verbunden, einschließlich Wechselkurs-, Markt- und Mietausfallrisiken.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Externe Links</div>
          <p>Für die Inhalte externer verlinkter Websites sind ausschließlich deren Betreiber verantwortlich.</p>
        </div>
      </LegalModal>

      <LegalModal
        open={modal === 'datenschutz'}
        onClose={() => setModal(null)}
        eyebrow="Datenschutzerklärung"
        title="Datenschutz"
      >
        <div className="v-legal-section">
          <div className="v-legal-label">Verantwortlicher</div>
          <p>
            <strong>VIRTORUM LLC</strong><br/>
            7901 4th St N Ste 300<br/>
            St. Petersburg, FL 33702, USA<br/>
            E-Mail: <a href="mailto:info@virtorum.com">info@virtorum.com</a>
          </p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Erhobene Daten</div>
          <p>Wir verarbeiten personenbezogene Daten ausschließlich im Rahmen der Kontaktaufnahme und der Anbahnung einer Geschäftsbeziehung. Dazu gehören insbesondere Name, E-Mail-Adresse und freiwillig von dir im Gespräch übermittelte Angaben zu deiner Investorensituation.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Zweck der Verarbeitung</div>
          <p>Die Verarbeitung erfolgt zur Beantwortung deiner Anfrage, zur Durchführung des Strategiegesprächs und — bei beidseitigem Interesse — zur Anbahnung einer konkreten Zusammenarbeit. Eine Weitergabe an Dritte erfolgt nur, soweit dies zur Abwicklung einer Transaktion erforderlich ist (z. B. an US-Steuerberater, Anwälte, Makler) und du dem zugestimmt hast.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Rechtsgrundlage</div>
          <p>Art. 6 Abs. 1 lit. b DSGVO (Vertragsanbahnung und -erfüllung) sowie Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an direkter Kommunikation mit Interessenten).</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Speicherdauer</div>
          <p>Daten werden gelöscht, sobald sie für die genannten Zwecke nicht mehr erforderlich sind — spätestens nach Ablauf gesetzlicher Aufbewahrungsfristen.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Deine Rechte</div>
          <p>Du hast das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit sowie Widerspruch gegen die Verarbeitung. Ein Widerruf erteilter Einwilligungen ist jederzeit formlos möglich per E-Mail an <a href="mailto:info@virtorum.com">info@virtorum.com</a>.</p>
        </div>
        <div className="v-legal-section">
          <div className="v-legal-label">Drittlandübermittlung</div>
          <p>Da die VIRTORUM LLC ihren Sitz in den USA hat, findet eine Übermittlung personenbezogener Daten in ein Drittland statt. Die Verarbeitung erfolgt auf Grundlage deiner Einwilligung zur Kontaktaufnahme sowie geeigneter vertraglicher Schutzmaßnahmen.</p>
        </div>
      </LegalModal>
    </>
  );
};

const FallstudienBar = () => {
  const goTo = (e) => { e.preventDefault(); document.getElementById('fallstudien')?.scrollIntoView({behavior:'smooth'}); };
  const kpis = [
    { num: '01', city: 'Cleveland Heights', type: 'Ohio', coc: '20,58 %', cfMo: '1.824 $', img: './house-1.webp?v=2' },
    { num: '02', city: 'University Circle', type: 'Ohio', coc: '23,98 %', cfMo: '1.441 $', featured: true, img: './house-2.webp?v=2' },
    { num: '03', city: 'Mount Pleasant', type: 'Ohio', coc: '23,93 %', cfMo: '1.671 $', img: './house-3.webp?v=2' },
  ];
  return (
    <section className="v-fsbar" data-screen-label="02 Fallstudien-CTA" onClick={goTo} role="link" tabIndex={0} onKeyDown={(e)=>{if(e.key==='Enter')goTo(e);}}>
      <div className="v-fsbar-inner">
        <div className="v-fsbar-top">
          <div className="v-fsbar-head">
            <span className="v-fsbar-eyebrow">02 · Fallstudien</span>
            <div className="v-fsbar-title" style={{fontStyle:'normal',fontWeight:400}}>Deals unserer Investoren.</div>
            <div className="v-fsbar-sub">Cleveland, Ohio · begleitete Transaktionen 2024 / 2025.</div>
          </div>
          <a className="v-fsbar-cta" href="#fallstudien" onClick={goTo}>
            <span>Alle Fallstudien ansehen</span>
            <span className="v-fsbar-cta-arrow" aria-hidden="true">→</span>
          </a>
        </div>
        <div className="v-fsbar-kpis">
          {kpis.map((k, i) => (
            <div key={i} className={`v-fsbar-kpi ${k.featured ? 'featured' : ''}`}>
              <div className="v-fsbar-kpi-head">
                {k.img && (
                  <div className="v-fsbar-kpi-thumb">
                    <img src={k.img} alt={`${k.city} · Beispielbild`} loading="lazy"/>
                  </div>
                )}
                <div className="v-fsbar-kpi-head-txt">
                  <span className="v-fsbar-kpi-num">Case {k.num}</span>
                  {k.featured && <span className="v-fsbar-kpi-tag">Featured</span>}
                </div>
              </div>
              <div className="v-fsbar-kpi-city">{k.city} <em>· {k.type}</em></div>
              <div className="v-fsbar-kpi-vals">
                <div className="v-fsbar-kpi-val">{k.coc}<span className="v-fsbar-kpi-lbl">EK-Rendite</span></div>
                <div className="v-fsbar-kpi-val v-fsbar-kpi-val-sec">{k.cfMo}<span className="v-fsbar-kpi-lbl">Cashflow / Monat</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ClevelandBlock, Steps, QualifyGrid, Team, FAQ, CTA, Footer, LegalModal, FallstudienBar });