// AGB page sections — expandAI

// ----- Hero -----
const AgbHero = () =>
<section style={{ padding: "120px 0 48px", position: "relative", overflow: "hidden" }}>
    <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" />
        Rechtliches
      </div>
      <h1 className="h1 gradient-text" style={{ marginBottom: 24 }}>
        Allgemeine<br />Geschäfts&shy;bedingungen.
      </h1>
      <p className="lead" style={{ maxWidth: 660, margin: "0 auto" }}>
        Die Bedingungen für die Nutzung unserer Software, Schnittstellen und
        Auswertungs&shy;dienste — kurz, transparent und auf B2B-Kunden zugeschnitten.
      </p>
    </div>
  </section>;


// ----- Overview card -----
const AgbOverview = () => {
  const fieldLabel = {
    display: "block",
    fontSize: 12,
    color: "var(--text-2)",
    marginBottom: 8,
    fontWeight: 500,
    letterSpacing: "0.02em"
  };
  const fieldValue = {
    fontSize: 15,
    color: "var(--text)",
    fontFamily: "'JetBrains Mono', monospace",
    background: "var(--bg-2)",
    border: "1px solid var(--border)",
    borderRadius: 10,
    padding: "12px 14px"
  };

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>

          {/* Main card */}
          <div className="card" style={{ padding: 36 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              <span className="dot" />
              Anbieter
            </div>
            <h2 className="h3" style={{ marginBottom: 8, fontSize: 26, letterSpacing: "-0.02em" }}>
              Vertragspartner.
            </h2>
            <p style={{ color: "var(--text-3)", fontSize: 14, marginTop: 0, marginBottom: 28, lineHeight: 1.6 }}>
              Diese AGB regeln die Vertragsbeziehung zwischen der expandAI GmbH
              („wir", „Anbieter") und ihren Kunden („Sie", „Kunde") im Rahmen
              der Nutzung der bereitgestellten Software-Dienste.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={fieldLabel}>Firmierung</label>
                <div style={fieldValue}>expandAI GmbH</div>
              </div>
              <div>
                <label style={fieldLabel}>Geschäftsführer</label>
                <div style={fieldValue}>Artur Piet</div>
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={fieldLabel}>Anschrift</label>
              <div style={{ ...fieldValue, lineHeight: 1.6 }}>
                Maria-Goeppert-Str. 1<br />
                23562 Lübeck<br />
                Deutschland
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <div>
                <label style={fieldLabel}>Handelsregister</label>
                <div style={fieldValue}>HRB 24373 HL</div>
              </div>
              <div>
                <label style={fieldLabel}>Stand</label>
                <div style={fieldValue}>Juni 2026</div>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <aside style={{ display: "grid", gap: 16 }}>
            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Kurz erklärt
              </div>
              <div style={{ display: "grid", gap: 10, fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.55 }}>
                <div>
                  <strong style={{ color: "var(--text)" }}>B2B-Verträge.</strong>{" "}
                  Unsere Dienste richten sich ausschließlich an Unternehmer
                  i. S. d. § 14 BGB.
                </div>
                <div>
                  <strong style={{ color: "var(--text)" }}>Software-as-a-Service.</strong>{" "}
                  Sie erhalten ein zeitlich begrenztes Nutzungsrecht — keinen
                  Kauf der Software.
                </div>
                <div>
                  <strong style={{ color: "var(--text)" }}>Recht & Gerichtsstand.</strong>{" "}
                  Es gilt deutsches Recht; Gerichtsstand ist Lübeck.
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Mitgeltende Dokumente
              </div>
              <div style={{ display: "grid", gap: 8, fontSize: 13.5 }}>
                <a href="datenschutz.html" style={{ color: "var(--accent)", textDecoration: "none" }}>
                  → Datenschutzerklärung
                </a>
                <a href="impressum.html" style={{ color: "var(--accent)", textDecoration: "none" }}>
                  → Impressum
                </a>
                <a href="preise.html" style={{ color: "var(--accent)", textDecoration: "none" }}>
                  → Preisliste &amp; Tarife
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                EU-Streitschlichtung
              </div>
              <div style={{ fontSize: 13.5, color: "var(--text-3)", lineHeight: 1.6 }}>
                Wir sind nicht verpflichtet und nicht bereit, an einem
                Streit&shy;beilegungs&shy;verfahren vor einer
                Verbraucher&shy;schlichtungs&shy;stelle teilzunehmen.
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};


// ----- AGB sections (accordion, paragraph-numbered) -----
const AgbSections = () => {
  const sections = [
  {
    nr: "§ 1",
    eyebrow: "Geltungsbereich",
    title: "Anwendungsbereich.",
    lead: "Diese AGB gelten für alle Verträge über die Nutzung der von der expandAI GmbH angebotenen Software-Dienste.",
    body: <>
        <p>
          (1) Diese Allgemeinen Geschäfts&shy;bedingungen gelten für alle Verträge
          zwischen der expandAI GmbH und dem Kunden über die Nutzung der von uns
          bereitgestellten Software-Dienste (im Folgenden „Dienste"),
          insbesondere zur automatisierten Auswertung von Kanal&shy;inspektions&shy;aufnahmen.
        </p>
        <p>
          (2) Unsere Dienste richten sich ausschließlich an Unternehmer im Sinne
          des § 14 BGB, juristische Personen des öffentlichen Rechts und
          öffentlich-rechtliche Sonder&shy;vermögen. Ein Vertragsschluss mit
          Verbrauchern ist ausgeschlossen.
        </p>
        <p>
          (3) Abweichende, entgegenstehende oder ergänzende Bedingungen des Kunden
          werden nur dann und insoweit Vertragsbestandteil, als wir ihrer Geltung
          ausdrücklich schriftlich zugestimmt haben.
        </p>
      </>
  },
  {
    nr: "§ 2",
    eyebrow: "Vertragsschluss",
    title: "Angebot und Annahme.",
    lead: "Der Vertrag kommt durch Registrierung, Bestätigung des Tarifs oder Auftragsbestätigung zustande.",
    body: <>
        <p>
          (1) Die Darstellung der Dienste auf unserer Website stellt kein
          rechtlich bindendes Angebot dar, sondern eine Aufforderung zur Abgabe
          eines Angebots durch den Kunden.
        </p>
        <p>
          (2) Mit der Registrierung und Bestätigung eines Tarifs gibt der Kunde
          ein verbindliches Angebot zum Abschluss eines Nutzungsvertrags ab.
          Der Vertrag kommt zustande, sobald wir die Annahme bestätigen oder
          den Zugang zu den Diensten freischalten.
        </p>
        <p>
          (3) Für individuell verhandelte Pilot- oder Enterprise-Verträge ist
          die schriftliche Auftrags&shy;bestätigung maßgeblich.
        </p>
      </>
  },
  {
    nr: "§ 3",
    eyebrow: "Leistungsumfang",
    title: "Was wir bereitstellen.",
    lead: "Wir stellen die Dienste als Software-as-a-Service über das Internet zur Verfügung.",
    body: <>
        <p>
          (1) Wir stellen dem Kunden die Dienste im Wege des „Software-as-a-Service"
          (SaaS) über das Internet zur Nutzung bereit. Der konkrete Funktions&shy;umfang
          richtet sich nach dem vom Kunden gewählten Tarif sowie ergänzenden
          Leistungs&shy;beschreibungen.
        </p>
        <p>
          (2) Der Kunde erkennt an, dass Software grundsätzlich nicht fehlerfrei
          erstellt werden kann. Eine Erkennung und Klassifizierung von
          Schadens&shy;merkmalen durch maschinelles Lernen erfolgt nach dem
          jeweiligen Stand der Technik, ohne Anspruch auf vollständige
          Erkennung sämtlicher Schäden.
        </p>
        <p>
          (3) Wir sind berechtigt, Inhalt, Funktionsweise und Bedienung der
          Dienste weiterzuentwickeln und anzupassen, sofern die zugesagte
          Funktionalität dadurch nicht wesentlich beeinträchtigt wird.
        </p>
      </>
  },
  {
    nr: "§ 4",
    eyebrow: "Nutzungsrechte",
    title: "Lizenz und Schutzrechte.",
    lead: "Sie erhalten ein nicht-ausschließliches, nicht übertragbares Nutzungsrecht für die Vertragsdauer.",
    body: <>
        <p>
          (1) Der Kunde erhält für die Dauer des Vertrags ein einfaches,
          nicht-ausschließliches, nicht über&shy;tragbares und nicht
          unter&shy;lizenzierbares Recht zur Nutzung der Dienste im Rahmen des
          gewählten Tarifs.
        </p>
        <p>
          (2) Eine Bearbeitung, Vervielfältigung, Reverse-Engineering,
          Dekompilierung oder ein sonstiger Eingriff in den Quellcode ist
          unzulässig, soweit nicht gesetzlich ausdrücklich erlaubt.
        </p>
        <p>
          (3) Alle Rechte an den Diensten — einschließlich Urheber-, Marken-,
          Patent- und sonstigen Schutz&shy;rechten — verbleiben bei uns oder
          unseren Lizenzgebern.
        </p>
      </>
  },
  {
    nr: "§ 5",
    eyebrow: "Pflichten des Kunden",
    title: "Mitwirkung und Sorgfalt.",
    lead: "Der Kunde stellt eine sachgerechte Nutzung sicher und schützt seine Zugangsdaten.",
    body: <>
        <p>
          (1) Der Kunde ist verpflichtet, seine Zugangsdaten vertraulich zu
          behandeln und vor unbefugtem Zugriff zu schützen. Bei Verdacht auf
          Missbrauch ist uns dies unverzüglich mitzuteilen.
        </p>
        <p>
          (2) Der Kunde stellt sicher, dass er über die für die Nutzung
          erforderlichen Rechte an hochgeladenen Inspektions&shy;aufnahmen,
          XML-Dateien und sonstigen Inhalten verfügt.
        </p>
        <p>
          (3) Der Kunde verpflichtet sich, die Dienste nicht zu nutzen, um
          rechtswidrige, beleidigende oder die Rechte Dritter verletzende
          Inhalte zu verarbeiten.
        </p>
      </>
  },
  {
    nr: "§ 6",
    eyebrow: "Preise & Zahlung",
    title: "Vergütung.",
    lead: "Es gelten die im jeweiligen Tarif ausgewiesenen Preise — zzgl. gesetzlicher Umsatzsteuer.",
    body: <>
        <p>
          (1) Es gelten die im gewählten Tarif zum Zeitpunkt des Vertrags&shy;schlusses
          ausgewiesenen Preise. Alle Preise verstehen sich netto zzgl. der
          gesetzlichen Umsatzsteuer.
        </p>
        <p>
          (2) Die Vergütung wird nach Maßgabe des gewählten Abrechnungs&shy;intervalls
          (monatlich oder jährlich) im Voraus fällig. Die Zahlung erfolgt per
          Rechnung, SEPA-Lastschrift oder Kreditkarte.
        </p>
        <p>
          (3) Bei Zahlungsverzug sind wir berechtigt, Verzugszinsen in
          gesetzlicher Höhe zu berechnen sowie den Zugang zu den Diensten
          nach vorheriger Ankündigung zu sperren.
        </p>
      </>
  },
  {
    nr: "§ 7",
    eyebrow: "Laufzeit & Kündigung",
    title: "Vertragsdauer.",
    lead: "Verträge laufen monatlich oder jährlich und verlängern sich automatisch — ordentlich kündbar mit der vereinbarten Frist.",
    body: <>
        <p>
          (1) Die Vertragslaufzeit richtet sich nach dem gewählten Tarif.
          Monats&shy;tarife verlängern sich automatisch um jeweils einen weiteren
          Monat, Jahres&shy;tarife um jeweils ein weiteres Jahr, sofern nicht mit
          einer Frist von 14 Tagen zum Laufzeit&shy;ende gekündigt wird.
        </p>
        <p>
          (2) Das Recht zur außer&shy;ordentlichen Kündigung aus wichtigem Grund
          bleibt unberührt. Ein wichtiger Grund liegt für uns insbesondere
          dann vor, wenn der Kunde gegen wesentliche Vertrags&shy;pflichten
          verstößt.
        </p>
        <p>
          (3) Die Kündigung kann jederzeit direkt im Tool über die
          Vertrags&shy;einstellungen vorgenommen werden. Alternativ genügt
          eine Kündigung in Textform (z.&nbsp;B. E-Mail).
        </p>
      </>
  },
  {
    nr: "§ 8",
    eyebrow: "Verfügbarkeit",
    title: "Service-Level.",
    lead: "Wir bemühen uns um eine hohe Verfügbarkeit — Wartungsfenster und höhere Gewalt ausgenommen.",
    body: <>
        <p>
          (1) Wir bemühen uns um eine Verfügbarkeit der Dienste von 99,0 % im
          Jahresmittel. Ausgenommen sind angekündigte Wartungs&shy;fenster sowie
          Ausfälle, die durch höhere Gewalt oder Umstände außerhalb unseres
          Verant&shy;wortungs&shy;bereichs verursacht werden.
        </p>
        <p>
          (2) Wartungsarbeiten, die zu Einschränkungen der Verfügbarkeit
          führen können, kündigen wir nach Möglichkeit mit angemessenem
          Vorlauf an.
        </p>
        <p>
          (3) Für Enterprise-Kunden können in einer gesonderten
          Service-Level-Vereinbarung abweichende Zusagen getroffen werden.
        </p>
      </>
  },
  {
    nr: "§ 9",
    eyebrow: "Haftung",
    title: "Haftungsbeschränkung.",
    lead: "Wir haften unbeschränkt für Vorsatz und grobe Fahrlässigkeit — sonst nach Maßgabe der gesetzlichen Vorschriften.",
    body: <>
        <p>
          (1) Wir haften unbeschränkt für Schäden aus der Verletzung des Lebens,
          des Körpers oder der Gesundheit sowie für Schäden, die auf Vorsatz
          oder grober Fahrlässigkeit beruhen.
        </p>
        <p>
          (2) Bei leicht fahrlässiger Verletzung wesentlicher Vertrags&shy;pflichten
          (Kardinal&shy;pflichten) ist unsere Haftung der Höhe nach auf den
          vertrags&shy;typischen, vorher&shy;sehbaren Schaden begrenzt.
        </p>
        <p>
          (3) Eine weitergehende Haftung — insbesondere für entgangenen Gewinn,
          mittelbare Schäden und Folgeschäden — ist ausgeschlossen, soweit
          gesetzlich zulässig.
        </p>
        <p>
          (4) Die Haftung nach dem Produkt&shy;haftungs&shy;gesetz bleibt unberührt.
        </p>
      </>
  },
  {
    nr: "§ 10",
    eyebrow: "Datenschutz",
    title: "Verarbeitung personenbezogener Daten.",
    lead: "Wir verarbeiten Daten gemäß DSGVO. Details: Datenschutzerklärung.",
    body: <p>
        Wir verarbeiten personen&shy;bezogene Daten ausschließlich nach Maßgabe
        der gesetzlichen Bestimmungen, insbesondere der DSGVO. Einzelheiten zur
        Art, zum Umfang, zum Zweck und zur Rechtsgrundlage der Verarbeitung
        sowie zu den Rechten der betroffenen Personen entnehmen Sie unserer{" "}
        <a href="datenschutz.html" style={{ color: "var(--accent)" }}>Datenschutz&shy;erklärung</a>.
        Soweit wir personen&shy;bezogene Daten im Auftrag des Kunden verarbeiten,
        schließen wir mit dem Kunden einen Vertrag über Auftrags&shy;verarbeitung
        nach Art. 28 DSGVO ab.
      </p>
  },
  {
    nr: "§ 11",
    eyebrow: "Vertraulichkeit",
    title: "Geheimhaltung.",
    lead: "Beide Parteien behandeln vertrauliche Informationen der anderen Partei vertraulich.",
    body: <p>
        Beide Parteien verpflichten sich, alle als vertraulich gekennzeichneten
        oder ihrer Natur nach vertraulichen Informationen, die ihnen im Rahmen
        der Vertrags&shy;durchführung bekannt werden, vertraulich zu behandeln und
        ausschließlich für die vereinbarten Zwecke zu verwenden. Diese
        Verpflichtung besteht über die Beendigung des Vertrags hinaus fort.
      </p>
  },
  {
    nr: "§ 12",
    eyebrow: "Änderungen",
    title: "Änderungen der AGB.",
    lead: "Wir können die AGB anpassen — Sie werden vorher informiert und können widersprechen.",
    body: <p>
        Wir behalten uns vor, diese AGB mit Wirkung für die Zukunft zu ändern,
        soweit dies aus rechtlichen, technischen oder geschäftlichen Gründen
        erforderlich ist und den Kunden hierdurch nicht unangemessen
        benachteiligt. Über Änderungen werden wir den Kunden mindestens
        sechs Wochen vor dem geplanten Wirksamwerden in Textform informieren.
        Widerspricht der Kunde nicht innerhalb von sechs Wochen nach Zugang
        der Änderungs&shy;mitteilung, gelten die Änderungen als angenommen;
        hierauf werden wir in der Änderungs&shy;mitteilung gesondert hinweisen.
      </p>
  },
  {
    nr: "§ 13",
    eyebrow: "Schlussbestimmungen",
    title: "Recht & Gerichtsstand.",
    lead: "Es gilt deutsches Recht — Gerichtsstand ist Lübeck.",
    body: <>
        <p>
          (1) Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss
          des UN-Kaufrechts.
        </p>
        <p>
          (2) Ausschließlicher Gerichts&shy;stand für alle Streitigkeiten aus oder
          im Zusammenhang mit diesem Vertrag ist Lübeck, sofern der Kunde
          Kaufmann, juristische Person des öffentlichen Rechts oder
          öffentlich-rechtliches Sonder&shy;vermögen ist.
        </p>
        <p>
          (3) Sollten einzelne Bestimmungen dieser AGB unwirksam sein oder
          werden, so wird hierdurch die Wirksamkeit der übrigen Bestimmungen
          nicht berührt.
        </p>
      </>
  }];


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

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              <span className="dot" />
              Vertragsbedingungen
            </div>
            <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>Die<br />Paragraphen.</h2>
            <p className="lead" style={{ marginTop: 0 }}>
              13 Abschnitte, klar gegliedert. Klicken Sie einen Paragraphen an,
              um die vollständigen Bestimmungen zu lesen.
            </p>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            {sections.map((s, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left",
                      background: "transparent", border: "none", color: "var(--text)",
                      padding: "22px 24px",
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      gap: 16, cursor: "pointer"
                    }}>
                    <div style={{ flex: 1, display: "flex", gap: 16, alignItems: "flex-start" }}>
                      <div style={{
                        width: 44, flexShrink: 0,
                        fontSize: 13, fontWeight: 600,
                        color: isOpen ? "var(--accent)" : "var(--text-3)",
                        fontFamily: "'JetBrains Mono', monospace",
                        paddingTop: 2,
                        letterSpacing: "-0.01em"
                      }}>
                        {s.nr}
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{
                          fontSize: 11, color: "var(--text-3)",
                          textTransform: "uppercase", letterSpacing: "0.14em",
                          marginBottom: 6, fontWeight: 500
                        }}>
                          {s.eyebrow}
                        </div>
                        <div style={{ fontSize: 17, fontWeight: 500, color: "var(--text)", letterSpacing: "-0.01em" }}>
                          {s.title}
                        </div>
                        {!isOpen && (
                          <div style={{ fontSize: 13.5, color: "var(--text-3)", marginTop: 6, lineHeight: 1.5 }}>
                            {s.lead}
                          </div>
                        )}
                      </div>
                    </div>
                    <span style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: isOpen ? "var(--accent-soft)" : "var(--bg-2)",
                      color: isOpen ? "var(--accent)" : "var(--text-3)",
                      display: "grid", placeItems: "center",
                      transition: "all 0.2s ease",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      flexShrink: 0
                    }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path d="M12 5v14M5 12h14" />
                      </svg>
                    </span>
                  </button>
                  {isOpen &&
                  <div style={{
                    padding: "0 24px 24px 84px",
                    color: "var(--text-2)",
                    fontSize: 14.5, lineHeight: 1.7,
                    textWrap: "pretty"
                  }}>
                      {s.body}
                    </div>
                  }
                </div>);

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

};


// ----- Disclaimer note -----
const AgbDisclaimer = () =>
<section style={{ padding: "0 0 32px" }}>
    <div className="container">
      <div style={{
      padding: "20px 24px",
      border: "1px solid var(--border)",
      borderRadius: 12,
      background: "var(--bg-2)",
      display: "flex",
      gap: 16,
      alignItems: "flex-start"
    }}>
        <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: "var(--accent-soft)",
        border: "1px solid var(--accent-ring)",
        color: "var(--accent)",
        display: "grid", placeItems: "center",
        flexShrink: 0
      }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <circle cx="12" cy="12" r="10" />
            <line x1="12" y1="16" x2="12" y2="12" />
            <line x1="12" y1="8" x2="12.01" y2="8" />
          </svg>
        </div>
        <div style={{ fontSize: 13.5, color: "var(--text-3)", lineHeight: 1.6 }}>
          <strong style={{ color: "var(--text-2)" }}>Hinweis.</strong>{" "}
          Diese AGB stellen keine Rechts&shy;beratung dar. Die individuelle Eignung
          und Wirksamkeit hängt vom konkreten Geschäfts&shy;modell und der
          Vertragspraxis ab. Wir empfehlen, vor der Veröffentlichung eine
          anwaltliche Prüfung einzuholen.
        </div>
      </div>
    </div>
  </section>;


// ----- CTA strip -----
const AgbCTA = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{
      borderRadius: "var(--radius-xl)",
      border: "1px solid var(--border)",
      background: "var(--surface)",
      padding: "48px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 32, flexWrap: "wrap"
    }}>
        <div style={{ maxWidth: 540 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span className="dot" />
            Individuelle Vereinbarung?
          </div>
          <h3 className="h2 gradient-text" style={{ fontSize: 32, marginBottom: 10 }}>
            Enterprise-Verträge auf Maß.
          </h3>
          <p style={{ color: "var(--text-3)", fontSize: 15, lineHeight: 1.55, margin: 0 }}>
            Für individuelle SLAs, Auftrags&shy;verarbeitung oder
            Rahmen&shy;verträge sprechen Sie uns direkt an — wir melden uns
            in der Regel binnen 24 Stunden.
          </p>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="kontakt.html" className="btn btn-primary btn-lg">
            Kontakt aufnehmen
            <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>
          </a>
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, { AgbHero, AgbOverview, AgbSections, AgbDisclaimer, AgbCTA });