// Landing page sections — expandAI

const Nav = ({ current = "home" }) =>
<nav className="nav">
    <div className="nav-inner">
      <a href="index.html" className="nav-logo"><Logo size={40} /></a>
      <div className="nav-links">
        <a href="index.html" className={current === "home" ? "active" : undefined}>Produkt</a>
        <a href="preise.html" className={current === "pricing" ? "active" : undefined}>Preise</a>
        <a href="forschung.html" className={current === "forschung" ? "active" : undefined}>Forschung</a>
        <a href="ueber-uns.html" className={current === "about" ? "active" : undefined}>Über uns</a>
      </div>
      <div className="nav-spacer" />
      <div className="nav-cta">
        <a href="https://app.expandai.de/login" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">Anmelden</a>
        <a href="https://app.expandai.de/register" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Ausprobieren</a>
      </div>
    </div>
  </nav>;


const Footer = () => {
  const socialIcon = {
    width: 18, height: 18, color: "var(--text-2)",
    display: "inline-flex", alignItems: "center", justifyContent: "center"
  };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          {/* Brand block */}
          <div className="footer-brand">
            <a href="index.html" aria-label="Zur Startseite" className="footer-logo">
              <Logo size={88} />
            </a>
            <div className="footer-copy">
              © 2026 expandAI GmbH.<br />
              Alle Rechte vorbehalten.
            </div>
            <div className="footer-socials">
              <a href="https://www.linkedin.com/company/expandaide" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="footer-social">
                <svg style={socialIcon} viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v15H.22V8zm7.5 0h4.37v2.05h.06c.61-1.16 2.1-2.39 4.32-2.39 4.62 0 5.47 3.04 5.47 7v8.34h-4.56v-7.4c0-1.77-.03-4.05-2.47-4.05-2.47 0-2.85 1.93-2.85 3.92V23h-4.55V8z" /></svg>
              </a>
              <span className="footer-social-sep" aria-hidden="true" />
              <a href="https://www.youtube.com/@expandAI-GmbH" target="_blank" rel="noopener noreferrer" aria-label="YouTube" className="footer-social">
                <svg style={socialIcon} viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3.02 3.02 0 0 0-2.13-2.14C19.46 3.5 12 3.5 12 3.5s-7.46 0-9.37.56A3.02 3.02 0 0 0 .5 6.2C0 8.13 0 12 0 12s0 3.87.5 5.8a3.02 3.02 0 0 0 2.13 2.14c1.91.56 9.37.56 9.37.56s7.46 0 9.37-.56a3.02 3.02 0 0 0 2.13-2.14c.5-1.93.5-5.8.5-5.8s0-3.87-.5-5.8zM9.6 15.6V8.4l6.24 3.6-6.24 3.6z" /></svg>
              </a>
              <span className="footer-social-sep" aria-hidden="true" />
              <a href="https://github.com/expandAI-GmbH" target="_blank" rel="noopener noreferrer" aria-label="GitHub" className="footer-social">
                <svg style={socialIcon} viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.8.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.3v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3" /></svg>
              </a>
            </div>
          </div>

          {/* Spacer column pushes links to the right */}
          <div className="footer-spacer" aria-hidden="true" />

          {/* Link columns */}
          <div className="footer-col">
            <h4>Loslegen</h4>
            <ul>
              <li><a href="preise.html">Preise</a></li>
              <li><a href="https://app.expandai.de/register" target="_blank" rel="noopener noreferrer">Registrieren</a></li>
              <li><a href="https://app.expandai.de/login" target="_blank" rel="noopener noreferrer">Login</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Unternehmen</h4>
            <ul>
              <li><a href="ueber-uns.html">Über uns</a></li>
              <li><a href="forschung.html">Forschung</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Vergleiche</h4>
            <ul>
              <li><a href="vergleich-pallon.html">Pallon</a></li>
              <li><a href="vergleich-wincan.html">WinCan KI</a></li>
              <li><a href="vergleich-cansol.html">Cansol</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Rechtliches</h4>
            <ul>
              <li><a href="impressum.html">Impressum</a></li>
              <li><a href="datenschutz.html">Datenschutz</a></li>
              <li><a href="agb.html">AGB</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();window.cookieConsent && window.cookieConsent.show();}}>Cookies</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>);

};


// ----- Hero -----
const Hero = ({ variant = "centered" }) => {
  const [val, setVal] = React.useState("");
  const examples = [
  "Wie erkennt die KI Risse nach DWA-M 149-2?",
  "Welche Schäden findet ihr in 100 m Kanal?",
  "Wie exportiere ich nach Isybau2017?"];


  return (
    <section style={{ padding: "120px 0 80px", position: "relative", overflow: "hidden" }}>
      {/* Soft accent glow */}
      <div aria-hidden style={{
        position: "absolute", left: "50%", top: -200,
        width: 900, height: 600, transform: "translateX(-50%)",
        background: "radial-gradient(ellipse at center, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%)",
        pointerEvents: "none"
      }} />
      <div className="container" style={{ textAlign: "center", position: "relative" }}>
        <div className="eyebrow" style={{ marginBottom: 28 }}>
          <span className="dot" />
          Künstliche Intelligenz trifft Kanalinspektion
        </div>
        <h1 className="h1 gradient-text" style={{ marginBottom: 24 }}>
          Kanalinspektionen<br />in Minuten ausgewertet.
        </h1>
        <p className="lead" style={{ maxWidth: 680, margin: "0 auto 40px" }}>KI zur Auswertung deiner TV-Befahrung von Hausanschlüssen. Erhalte in 15&nbsp;Minuten eine normgerechte Zustandserfassung.</p>

        {/* Chat-style prompt */}
        <a
          href="https://app.expandai.de/login"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            maxWidth: 680, margin: "0 auto",
            background: "var(--surface)",
            border: "1px solid var(--border-strong)",
            borderRadius: 22,
            padding: "8px 8px 8px 20px",
            display: "flex", alignItems: "center", gap: 12,
            boxShadow: "0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02)",
            textDecoration: "none", cursor: "pointer"
          }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text-3)" strokeWidth="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
          </svg>
          <div style={{
            flex: 1, color: "var(--text-3)", fontSize: 15, padding: "14px 0",
            textAlign: "left"
          }}>Hausanschluss XML-Datei und Video hier ablegen…</div>

          <span className="btn btn-accent" style={{ borderRadius: 999, padding: "10px 16px", display: "inline-flex" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </span>
        </a>
      </div>
    </section>);

};

// ----- Trusted by -----
const TrustedBy = () =>
<section style={{ padding: "16px 0 80px" }}>
    <div className="container">
      <div className="trust-logos" style={{
      display: "flex", justifyContent: "center", alignItems: "center",
      gap: 72, flexWrap: "wrap", opacity: 0.85
    }}>
        <img
        src="assets/exrohr-logo.png"
        alt="ExRohr – Partner für Kanalinspektion und TV-Befahrung"
        loading="lazy"
        decoding="async"
        style={{ width: "auto", objectFit: "contain", opacity: 0.85, height: "69px" }} />

        <img
        src="assets/norva-logo.png"
        alt="Norva24 – Kunde aus dem Bereich Kanalinspektion"
        loading="lazy"
        decoding="async"
        style={{ height: 40, width: "auto", objectFit: "contain", opacity: 0.85 }} />

        <img
        src="assets/partner-logo.png"
        alt="Partner aus der Kanal-TV-Inspektion"
        loading="lazy"
        decoding="async"
        style={{ height: 50, width: "auto", objectFit: "contain", opacity: 0.85 }} />
      </div>
    </div>
  </section>;


// ----- Dashboard showcase -----
const Showcase = () =>
<section className="section section-divider showcase-section" id="features">
    {/* Ambient glow backdrop */}
    <div className="showcase-glow" aria-hidden="true" />

    <div className="container" style={{ position: "relative" }}>

      {/* Stage */}
      <div className="showcase-stage">
        {/* Browser screenshot */}
        <div className="showcase-frame">
          <img
          src="assets/expandai-tool.png"
          alt="expandAI – KI-gestützte Auswertung der Kanalinspektion: Schadenserkennung in einer TV-Befahrung nach DWA-M 149-2"
          loading="lazy"
          decoding="async"
          style={{ display: "block", width: "100%", height: "auto" }} />

          {/* AI detection overlay — Ablagerung im inneren Rohr */}
          <div className="detect detect-ablagerung" style={{ left: "23%", top: "74%", width: "30%", height: "18%" }}>
            <span className="detect-corner tl" /><span className="detect-corner tr" />
            <span className="detect-corner bl" /><span className="detect-corner br" />
            <span className="detect-label">
              <span className="detect-dot" />
              Ablagerung
              <span className="detect-conf">25 %</span>
            </span>
          </div>
        </div>

        {/* Feature chips */}
        <div className="showcase-chips">
          <span className="chip"><span className="chip-dot" />Echtzeit-Klassifikation</span>
          <span className="chip"><span className="chip-dot" />Normkonform</span>
          <span className="chip"><span className="chip-dot" />Ein-Klick-Export</span>
        </div>
      </div>
    </div>
  </section>;


// ----- How it works -----
const How = () => {
  const steps = [
  { n: "01", t: "Hochladen", d: "Inspektionsaufnahmen und XML-Datei hochladen. expandAI synchronisiert Bildmaterial, Haltungsdaten und Metadaten automatisch." },
  { n: "02", t: "Kodierung durch KI", d: "Die KI klassifiziert Schäden wie Risse oder Ablagerungen präzise nach Norm. Sichte die Feststellungen und passe sie bei Bedarf flexibel an." },
  { n: "03", t: "Bericht exportieren", d: "Generiere fertige PDF-Berichte und standardisierte XML-Dateien mit nur einem Klick. Korrekturen sind jederzeit möglich." }];

  return (
    <section className="section section-divider" id="how">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Workflow
          </div>
          <h2 className="h2 gradient-text">In drei Schritten zum fertigen Zustandsbericht.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {steps.map((s, i) =>
          <div key={i} className="card" style={{ padding: 32, minHeight: 240 }}>
              <div style={{
              fontFamily: "monospace", fontSize: 13, color: "var(--accent)",
              marginBottom: 32, letterSpacing: "0.08em"
            }}>{s.n}</div>
              <div className="h3" style={{ marginBottom: 12 }}>{s.t}</div>
              <p style={{ color: "var(--text-2)", lineHeight: 1.55, fontSize: 14, margin: 0 }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ----- Standards -----
const Standards = () =>
<section className="section section-divider" id="standards">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Standards
          </div>
          <h2 className="h2 gradient-text" style={{ marginBottom: 20 }}>Konform nach Isybau und DWA-M 149-2.

        </h2>
          <p className="lead" style={{ marginBottom: 24 }}>expandAI arbeitet nach den Schadenscodes des deutschen Regelwerks. Jede Klassifikation ist nachvollziehbar dokumentiert, vom KI-Vorschlag bis zur finalen Freigabe des Inspekteurs.



        </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, color: "var(--text-2)", fontSize: 14 }}>
            {[
          "DSGVO-konforme Speicherung"].
          map((t, i) =>
          <li key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
                {t}
              </li>
          )}
          </ul>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 14 }}>
          {[
        { code: "DIN EN 13508-2", desc: "Europäische Norm für die Zustandserfassung", color: "#a78bfa" },
        { code: "DWA-M 149-2", desc: "Schadensklassifikation nach deutschem Regelwerk", color: "#34d399" },
        { code: "Isybau2017", desc: "Datenaustauschformat für Kanalinspektionen", color: "#60a5fa" },
        { code: "Isybau2013", desc: "Älteres Datenaustauschformat, weiterhin im Einsatz", color: "#f59e0b" }].
        map((t, i) => {
          const r = parseInt(t.color.slice(1, 3), 16);
          const g = parseInt(t.color.slice(3, 5), 16);
          const b = parseInt(t.color.slice(5, 7), 16);
          return (
            <div key={i} className="card" style={{
              padding: "18px 22px",
              display: "flex", alignItems: "center", gap: 18,
              borderLeft: `2px solid ${t.color}`,
              background: `linear-gradient(90deg, rgba(${r},${g},${b},0.08) 0%, var(--surface) 60%)`,
              position: "relative", overflow: "hidden"
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                background: `rgba(${r},${g},${b},0.14)`,
                border: `1px solid rgba(${r},${g},${b},0.3)`,
                color: t.color,
                display: "grid", placeItems: "center"
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" />
                  <polyline points="9 12 11 14 15 10" />
                </svg>
              </div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{
                  fontFamily: "JetBrains Mono, monospace", fontSize: 13, color: t.color,
                  letterSpacing: "0.04em", marginBottom: 4, fontWeight: 500
                }}>{t.code}</div>
                <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.4 }}>{t.desc}</div>
              </div>
              <div style={{
                fontSize: 10, color: t.color,
                textTransform: "uppercase", letterSpacing: "0.12em",
                fontWeight: 600, flexShrink: 0,
                padding: "4px 8px",
                borderRadius: 999,
                background: `rgba(${r},${g},${b},0.1)`,
                border: `1px solid rgba(${r},${g},${b},0.25)`
              }}>Konform</div>
            </div>);

        })}
        </div>
      </div>
    </div>
  </section>;


// ----- Testimonials -----
const Testimonials = () => {
  const items = [
  {
    q: "Was vorher zwei Tage dauerte, läuft jetzt in einer Stunde durch. Der Bericht ist sofort prüfbar.",
    n: "Markus Hartl", r: "Geschäftsführer, RohrTech GmbH"
  },
  {
    q: "Die KI findet Schäden, die wir vorher übersehen hätten. Trotzdem entscheidet immer mein Team final.",
    n: "Sandra Klein", r: "Inspektionsleiterin, KanalPro"
  },
  {
    q: "Endlich kein Excel mehr. Isybau-Export funktioniert auf Knopfdruck und der Auftraggeber ist zufrieden.",
    n: "Tobias Weber", r: "Selbstständiger Inspekteur"
  }];

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Stimmen aus der Praxis
          </div>
          <h2 className="h2 gradient-text">Kanalinspektion mit KI – Stimmen aus der Praxis.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {items.map((it, i) =>
          <div key={i} className="card" style={{ padding: 32 }}>
              <div style={{ fontSize: 16, lineHeight: 1.55, color: "var(--text)", marginBottom: 24, textWrap: "pretty" }}>
                „{it.q}"
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                width: 36, height: 36, borderRadius: 999,
                background: "var(--accent-soft)", color: "var(--accent)",
                display: "grid", placeItems: "center", fontWeight: 600, fontSize: 14
              }}>{it.n.split(" ").map((p) => p[0]).join("")}</div>
                <div>
                  <div style={{ fontSize: 13, color: "var(--text)" }}>{it.n}</div>
                  <div style={{ fontSize: 12, color: "var(--text-3)" }}>{it.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ----- FAQ -----
const FAQ = () => {
  const items = [
  {
    q: "Was ist KI-gestützte Kanalinspektion?",
    a: "KI Kanalinspektion bezeichnet die automatisierte Auswertung von TV-Befahrungen durch Künstliche Intelligenz. Die KI sichtet das Videomaterial, erkennt Schäden wie Risse, Ablagerungen oder Wurzeleinwuchs und klassifiziert sie nach DIN EN 13508-2. Der Inspekteur prüft die Vorschläge und gibt den finalen Zustandsbericht frei."
  },
  {
    q: "Welche Inspektionstypen unterstützt expandAI aktuell?",
    a: "Aktuell wertet expandAI TV-Befahrungen von Hausanschlüssen automatisch aus – inklusive Schadenserkennung, Klassifikation nach DWA-M 149-2 und Isybau-Export. Die KI-Auswertung für Hauptkanäle und Schächte befindet sich in aktiver Entwicklung. Sprich uns an, wenn du als Pilotkunde frühen Zugang haben möchtest."
  },
  {
    q: "Welche Schäden erkennt die KI in der Kanal-TV-Inspektion?",
    a: "expandAI erkennt alle gängigen Schadensbilder: Risse, Ablagerungen, Wurzeleinwuchs, Korrosion, Verformungen, Hindernisse, Undichtigkeiten an Anschlüssen und Mängel an Hausanschlüssen – jeweils klassifiziert nach DWA-M 149-2 und IsyBau."
  },
  {
    q: "Wie läuft die Zustandserfassung mit expandAI ab?",
    a: "Aufnahmen und XML-Datei hochladen, die KI klassifiziert die Schäden, der Inspekteur verifiziert, und ein normgerechter Zustandsbericht inklusive Isybau-XML wird mit einem Klick exportiert."
  },
  {
    q: "Ist expandAI mit Isybau2017 kompatibel?",
    a: "Ja. expandAI importiert und exportiert sowohl Isybau2017 als auch Isybau2013. Die Berichte können direkt an Auftraggeber, Kommunen und Ingenieurbüros übergeben werden."
  },
  {
    q: "Werden meine Daten DSGVO-konform verarbeitet?",
    a: "Ja. Alle Daten werden DSGVO-konform auf Servern in der EU verarbeitet und gespeichert."
  },
  {
    q: "Für wen lohnt sich die KI-gestützte Kanalinspektion?",
    a: "Für Inspektionsfirmen, Rohrreinigungsbetriebe, selbstständige Kanalinspekteure, Kommunen und Ingenieurbüros, die ihre TV-Befahrungen schneller und konsistenter auswerten möchten."
  }];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section section-divider" id="faq">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Häufige Fragen
          </div>
          <h2 className="h2 gradient-text">Alles Wichtige zur KI-gestützten Kanalinspektion.</h2>
        </div>
        <div style={{ display: "grid", gap: 12 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div
                key={i}
                className="card"
                style={{
                  padding: 0,
                  overflow: "hidden",
                  borderColor: isOpen ? "var(--border-strong)" : "var(--border)"
                }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 16,
                    padding: "22px 26px",
                    background: "transparent",
                    border: "none",
                    cursor: "pointer",
                    color: "var(--text)",
                    fontFamily: "inherit",
                    fontSize: 16,
                    fontWeight: 500,
                    textAlign: "left",
                    lineHeight: 1.4
                  }}>
                  <span style={{ flex: 1, textWrap: "pretty" }}>{it.q}</span>
                  <span
                    aria-hidden="true"
                    style={{
                      width: 28, height: 28, borderRadius: 999,
                      display: "grid", placeItems: "center",
                      background: "var(--accent-soft)", color: "var(--accent)",
                      flexShrink: 0,
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      transition: "transform 0.2s ease"
                    }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                      <path d="M12 5v14M5 12h14" />
                    </svg>
                  </span>
                </button>
                {isOpen &&
                <div style={{
                  padding: "0 26px 24px",
                  color: "var(--text-2)",
                  fontSize: 14,
                  lineHeight: 1.6,
                  textWrap: "pretty"
                }}>
                    {it.a}
                  </div>
                }
              </div>);

          })}
        </div>
      </div>
    </section>);

};

// ----- Final CTA -----
const FinalCTA = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{
      textAlign: "center",
      padding: "80px 32px",
      background: "radial-gradient(ellipse at center top, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%), var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xl)",
      position: "relative",
      overflow: "hidden"
    }}>
        <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>
          Bereit für die erste Inspektion?
        </h2>
        <p className="lead" style={{ maxWidth: 520, margin: "0 auto 32px" }}>Jetzt kostenlos testen. 

      </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="preise.html" className="btn btn-primary btn-lg">Kostenlos testen</a>
          <a href="kontakt.html" className="btn btn-ghost btn-lg">Demo anfragen</a>
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, { Nav, Footer, Hero, TrustedBy, Showcase, How, Standards, Testimonials, FAQ, FinalCTA });