import { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'EU AI Act Ueberblick - Was Unternehmen wissen muessen | BreakPilot Comply',
  description: 'Der EU AI Act reguliert KI-Systeme nach Risikostufen. Erfahren Sie, welche Pflichten fuer Ihr Unternehmen gelten.',
}

export default function AIActUeberblickPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="pt-12 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            EU AI Act - Verordnung (EU) 2024/1689
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
            EU AI Act: Der umfassende Ueberblick fuer Unternehmen
          </h1>
          <p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
            Die weltweit erste umfassende KI-Regulierung ist in Kraft. Erfahren Sie, welche Pflichten fuer Ihr Unternehmen gelten und wie Sie sich vorbereiten koennen.
          </p>
          <div className="mt-6 flex items-center justify-center gap-4 text-sm text-slate-500">
            <span>Aktualisiert: Februar 2025</span>
            <span className="w-1 h-1 bg-slate-300 rounded-full" />
            <span>Lesezeit: ca. 12 Minuten</span>
          </div>
        </div>
      </section>

      {/* Article Content */}
      <article className="py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">

          {/* Table of Contents */}
          <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 mb-12">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Inhaltsverzeichnis</h2>
            <nav className="space-y-2 text-sm">
              <a href="#was-ist-der-ai-act" className="block text-primary-600 hover:text-primary-700 transition-colors">1. Was ist der EU AI Act?</a>
              <a href="#risikokategorien" className="block text-primary-600 hover:text-primary-700 transition-colors">2. Die vier Risikokategorien</a>
              <a href="#zeitplan" className="block text-primary-600 hover:text-primary-700 transition-colors">3. Zeitplan der Anwendung</a>
              <a href="#pflichten-anbieter" className="block text-primary-600 hover:text-primary-700 transition-colors">4. Pflichten fuer Anbieter von Hochrisiko-KI</a>
              <a href="#pflichten-nutzer" className="block text-primary-600 hover:text-primary-700 transition-colors">5. Pflichten fuer Nutzer von KI-Systemen</a>
              <a href="#strafen" className="block text-primary-600 hover:text-primary-700 transition-colors">6. Strafen bei Verstoss</a>
              <a href="#checkliste" className="block text-primary-600 hover:text-primary-700 transition-colors">7. Checkliste: Ist Ihr Unternehmen betroffen?</a>
              <a href="#breakpilot-comply" className="block text-primary-600 hover:text-primary-700 transition-colors">8. Wie BreakPilot Comply hilft</a>
            </nav>
          </div>

          {/* Section 1: Was ist der EU AI Act? */}
          <section id="was-ist-der-ai-act">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              1. Was ist der EU AI Act?
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Der EU AI Act (Verordnung (EU) 2024/1689) ist die weltweit erste umfassende Regulierung fuer Kuenstliche Intelligenz. Am 1. August 2024 ist die Verordnung offiziell in Kraft getreten und wird stufenweise bis 2027 vollstaendig anwendbar. Ziel der Verordnung ist es, einen einheitlichen Rechtsrahmen fuer die Entwicklung, den Vertrieb und den Einsatz von KI-Systemen innerhalb der Europaeischen Union zu schaffen.
            </p>
            <p className="text-gray-600 leading-relaxed mb-4">
              Der regulatorische Ansatz folgt dem Prinzip der Risikobasierung: Je hoeher das Risiko eines KI-Systems fuer Grundrechte, Sicherheit oder demokratische Prozesse, desto strenger sind die Anforderungen. Damit unterscheidet sich der EU AI Act grundlegend von sektoralen Regulierungsansaetzen und schafft stattdessen einen horizontalen, technologieneutralen Rahmen, der fuer alle Branchen gilt.
            </p>
            <p className="text-gray-600 leading-relaxed mb-4">
              Fuer Unternehmen bedeutet dies: Wer KI-Systeme entwickelt, vertreibt oder einsetzt, muss pruefen, in welche Risikokategorie die eigenen Systeme fallen, und die entsprechenden Pflichten erfuellen. Die Verordnung gilt nicht nur fuer europaeische Unternehmen, sondern fuer jeden Anbieter, dessen KI-Systeme auf dem EU-Markt eingesetzt werden -- unabhaengig vom Firmensitz.
            </p>

            <div className="bg-primary-50 border border-primary-200 rounded-xl p-6 my-8">
              <div className="flex items-start gap-3">
                <svg className="w-6 h-6 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                  <p className="font-semibold text-primary-900 mb-1">Gut zu wissen</p>
                  <p className="text-primary-800 text-sm">
                    Der EU AI Act definiert ein &quot;KI-System&quot; als ein maschinengestuetztes System, das mit unterschiedlichem Grad an Autonomie operiert, sich nach der Bereitstellung anpassen kann und aus den erhaltenen Eingaben Ergebnisse wie Vorhersagen, Inhalte, Empfehlungen oder Entscheidungen ableitet, die physische oder virtuelle Umgebungen beeinflussen koennen. Diese Definition ist bewusst breit gefasst und umfasst sowohl klassisches Machine Learning als auch generative KI und Large Language Models.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Section 2: Die vier Risikokategorien */}
          <section id="risikokategorien">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              2. Die vier Risikokategorien
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Das Herzstrueck des EU AI Act ist das vierstufige Risikoklassifizierungssystem. Jedes KI-System wird anhand seines Anwendungszwecks und der potenziellen Auswirkungen einer der vier Kategorien zugeordnet. Die Einstufung bestimmt, welche regulatorischen Anforderungen erfuellt werden muessen.
            </p>

            <div className="space-y-4 mt-6">
              {/* Unakzeptables Risiko */}
              <div className="border-l-4 border-red-500 bg-red-50 rounded-r-xl p-6">
                <div className="flex items-center gap-3 mb-2">
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-700 font-bold text-sm">!</span>
                  <h3 className="text-xl font-semibold text-gray-800">Unakzeptables Risiko -- Verboten</h3>
                </div>
                <p className="text-gray-600 text-sm mb-3">
                  KI-Systeme in dieser Kategorie werden als direkte Bedrohung fuer Grundrechte und demokratische Werte angesehen und sind in der EU vollstaendig verboten. Es gibt keinen Compliance-Pfad -- diese Systeme duerfen weder entwickelt noch eingesetzt werden.
                </p>
                <div className="mt-3">
                  <p className="text-sm font-medium text-red-800 mb-2">Beispiele verbotener Praktiken:</p>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li className="flex items-start gap-2">
                      <span className="text-red-500 mt-1">&#x2716;</span>
                      <span>Social Scoring durch Behoerden (Bewertung des Sozialverhaltens von Buergern)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-500 mt-1">&#x2716;</span>
                      <span>Biometrische Echtzeit-Fernidentifikation im oeffentlichen Raum (mit engen Ausnahmen fuer Strafverfolgung)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-500 mt-1">&#x2716;</span>
                      <span>Emotionserkennung am Arbeitsplatz und in Bildungseinrichtungen</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-500 mt-1">&#x2716;</span>
                      <span>Manipulative KI-Techniken, die Schwaechen von Personen ausnutzen (Alter, Behinderung, wirtschaftliche Lage)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-500 mt-1">&#x2716;</span>
                      <span>Ungezielte Gesichtsbild-Datenbanken durch Scraping von Internet- oder Ueberwachungsmaterial</span>
                    </li>
                  </ul>
                </div>
              </div>

              {/* Hochrisiko */}
              <div className="border-l-4 border-orange-500 bg-orange-50 rounded-r-xl p-6">
                <div className="flex items-center gap-3 mb-2">
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-orange-100 text-orange-700 font-bold text-sm">H</span>
                  <h3 className="text-xl font-semibold text-gray-800">Hochrisiko -- Strenge Auflagen</h3>
                </div>
                <p className="text-gray-600 text-sm mb-3">
                  Hochrisiko-KI-Systeme sind erlaubt, unterliegen aber umfangreichen regulatorischen Anforderungen. Diese Kategorie ist fuer die meisten Unternehmen die relevanteste, da sie zahlreiche gaengige Anwendungsgebiete umfasst. Hochrisiko-Systeme sind in Anhang III der Verordnung aufgelistet und betreffen unter anderem:
                </p>
                <div className="mt-3 grid sm:grid-cols-2 gap-3">
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Bildung & Ausbildung</p>
                    <p className="text-xs text-gray-500 mt-1">Zugang zu Bildungseinrichtungen, Pruefungsbewertung, Leistungsbeurteilung</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Personalwesen</p>
                    <p className="text-xs text-gray-500 mt-1">Bewerberauswahl, Leistungsbewertung, Befoerderungsentscheidungen</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Kritische Infrastruktur</p>
                    <p className="text-xs text-gray-500 mt-1">Steuerung von Wasser, Gas, Strom, Verkehr</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Kreditwuerdigkeit & Versicherung</p>
                    <p className="text-xs text-gray-500 mt-1">Bonitaetsbewertung, Risikoeinstufung bei Lebens- und Krankenversicherung</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Strafverfolgung</p>
                    <p className="text-xs text-gray-500 mt-1">Risikobewertung, Luegenerkennung, Beweismittelbewertung</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-orange-200">
                    <p className="text-sm font-medium text-gray-900">Migration & Grenzschutz</p>
                    <p className="text-xs text-gray-500 mt-1">Asylantragsbewertung, Risikoeinstufung bei der Einreise</p>
                  </div>
                </div>
              </div>

              {/* Begrenztes Risiko */}
              <div className="border-l-4 border-yellow-500 bg-yellow-50 rounded-r-xl p-6">
                <div className="flex items-center gap-3 mb-2">
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-yellow-100 text-yellow-700 font-bold text-sm">B</span>
                  <h3 className="text-xl font-semibold text-gray-800">Begrenztes Risiko -- Transparenzpflichten</h3>
                </div>
                <p className="text-gray-600 text-sm mb-3">
                  Fuer KI-Systeme mit begrenztem Risiko gelten primaer Transparenz- und Kennzeichnungspflichten. Nutzer muessen informiert werden, dass sie mit einem KI-System interagieren oder dass Inhalte KI-generiert sind. Diese Anforderungen sind deutlich weniger umfangreich als bei Hochrisiko-Systemen.
                </p>
                <div className="mt-3">
                  <p className="text-sm font-medium text-yellow-800 mb-2">Beispiele:</p>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li className="flex items-start gap-2">
                      <span className="text-yellow-600 mt-1">&#x25B6;</span>
                      <span>Chatbots und virtuelle Assistenten (Nutzer muss wissen, dass er mit einer KI interagiert)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-yellow-600 mt-1">&#x25B6;</span>
                      <span>Deepfakes und KI-generierte Bild-/Video-/Audioinhalte (muessen als kuenstlich erzeugt gekennzeichnet werden)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-yellow-600 mt-1">&#x25B6;</span>
                      <span>KI-generierte Texte, die zu Fragen des oeffentlichen Interesses veroeffentlicht werden</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-yellow-600 mt-1">&#x25B6;</span>
                      <span>Emotionserkennungssysteme (ausserhalb verbotener Kontexte) mit Informationspflicht</span>
                    </li>
                  </ul>
                </div>
              </div>

              {/* Minimales Risiko */}
              <div className="border-l-4 border-green-500 bg-green-50 rounded-r-xl p-6">
                <div className="flex items-center gap-3 mb-2">
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-700 font-bold text-sm">M</span>
                  <h3 className="text-xl font-semibold text-gray-800">Minimales Risiko -- Keine besonderen Pflichten</h3>
                </div>
                <p className="text-gray-600 text-sm mb-3">
                  Die ueberwiegende Mehrheit der KI-Systeme faellt in diese Kategorie. Fuer sie gelten keine spezifischen regulatorischen Anforderungen aus dem AI Act. Die Kommission ermutigt Anbieter jedoch, freiwillige Verhaltenskodizes zu uebernehmen.
                </p>
                <div className="mt-3">
                  <p className="text-sm font-medium text-green-800 mb-2">Beispiele:</p>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li className="flex items-start gap-2">
                      <span className="text-green-600 mt-1">&#x2714;</span>
                      <span>Spam-Filter und E-Mail-Sortierung</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-600 mt-1">&#x2714;</span>
                      <span>Autokorrektur und Rechtschreibpruefung</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-600 mt-1">&#x2714;</span>
                      <span>KI-gestuetzte Empfehlungssysteme fuer Musik oder Filme</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-600 mt-1">&#x2714;</span>
                      <span>KI-optimierte Lagerverwaltung und Bestandsplanung</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-600 mt-1">&#x2714;</span>
                      <span>Suchmaschinen-Ranking und Content-Optimierung</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          {/* Section 3: Zeitplan */}
          <section id="zeitplan">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              3. Zeitplan der Anwendung
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Der EU AI Act tritt nicht auf einen Schlag in vollem Umfang in Kraft, sondern wird in mehreren Stufen anwendbar. Dieser gestaffelte Ansatz gibt Unternehmen Zeit, sich auf die neuen Anforderungen vorzubereiten. Die folgende Zeitleiste zeigt die wesentlichen Meilensteine:
            </p>

            {/* Timeline */}
            <div className="relative mt-8 ml-4">
              {/* Vertical Line */}
              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary-400 via-primary-500 to-primary-600" />

              {/* Aug 2024 */}
              <div className="relative flex items-start gap-6 pb-10">
                <div className="flex-shrink-0 w-9 h-9 bg-primary-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-5 flex-1 shadow-sm">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="px-2.5 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded-full">Bereits in Kraft</span>
                    <span className="text-sm font-semibold text-slate-900">1. August 2024</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">Inkrafttreten der Verordnung</h3>
                  <p className="text-gray-600 text-sm">
                    Der EU AI Act wurde im Amtsblatt der EU veroeffentlicht und ist formell in Kraft getreten. Ab diesem Datum beginnen die Uebergangsfristen zu laufen.
                  </p>
                </div>
              </div>

              {/* Feb 2025 */}
              <div className="relative flex items-start gap-6 pb-10">
                <div className="flex-shrink-0 w-9 h-9 bg-red-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                  </svg>
                </div>
                <div className="bg-white border border-red-200 rounded-xl p-5 flex-1 shadow-sm">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="px-2.5 py-0.5 bg-red-100 text-red-700 text-xs font-medium rounded-full">Jetzt anwendbar</span>
                    <span className="text-sm font-semibold text-slate-900">2. Februar 2025</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">Verbotene KI-Praktiken</h3>
                  <p className="text-gray-600 text-sm">
                    Die Verbote fuer KI-Systeme mit unakzeptablem Risiko werden durchsetzbar. Unternehmen, die Social Scoring, manipulative KI oder verbotene biometrische Systeme einsetzen, muessen diese sofort einstellen. Verstoesse koennen ab diesem Zeitpunkt sanktioniert werden.
                  </p>
                </div>
              </div>

              {/* Aug 2025 */}
              <div className="relative flex items-start gap-6 pb-10">
                <div className="flex-shrink-0 w-9 h-9 bg-accent-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
                <div className="bg-white border border-accent-200 rounded-xl p-5 flex-1 shadow-sm">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="px-2.5 py-0.5 bg-accent-100 text-accent-700 text-xs font-medium rounded-full">Kommend</span>
                    <span className="text-sm font-semibold text-slate-900">2. August 2025</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">GPAI-Modelle &amp; Governance</h3>
                  <p className="text-gray-600 text-sm">
                    Pflichten fuer Anbieter von General Purpose AI (GPAI) Modellen werden anwendbar. Dies betrifft insbesondere Anbieter grosser Sprachmodelle (wie GPT, Claude, Gemini). Transparenzpflichten, Urheberrechtsschutz und Dokumentationsanforderungen greifen. Das EU AI Office und nationale Aufsichtsbehoerden nehmen ihre Arbeit auf.
                  </p>
                </div>
              </div>

              {/* Aug 2026 */}
              <div className="relative flex items-start gap-6 pb-10">
                <div className="flex-shrink-0 w-9 h-9 bg-orange-500 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
                <div className="bg-white border border-orange-200 rounded-xl p-5 flex-1 shadow-sm">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="px-2.5 py-0.5 bg-orange-100 text-orange-700 text-xs font-medium rounded-full">Wichtiger Meilenstein</span>
                    <span className="text-sm font-semibold text-slate-900">2. August 2026</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">Hochrisiko-KI-Systeme (Anhang III)</h3>
                  <p className="text-gray-600 text-sm">
                    Der Grossteil der Verordnung wird anwendbar. Alle Pflichten fuer Hochrisiko-KI-Systeme nach Anhang III greifen vollstaendig: Risikomanagementsysteme, Datenqualitaet, technische Dokumentation, Transparenz, menschliche Aufsicht und Genauigkeitsanforderungen muessen implementiert sein. Dies ist der Stichtag, auf den sich die meisten Unternehmen vorbereiten muessen.
                  </p>
                </div>
              </div>

              {/* Aug 2027 */}
              <div className="relative flex items-start gap-6">
                <div className="flex-shrink-0 w-9 h-9 bg-slate-400 rounded-full flex items-center justify-center z-10 ring-4 ring-white">
                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
                <div className="bg-white border border-slate-200 rounded-xl p-5 flex-1 shadow-sm">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="px-2.5 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">Letzte Phase</span>
                    <span className="text-sm font-semibold text-slate-900">2. August 2027</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">Vollstaendige Anwendung</h3>
                  <p className="text-gray-600 text-sm">
                    Auch Hochrisiko-KI-Systeme nach Anhang I (die unter bestehende EU-Produktsicherheitsvorschriften fallen, z.B. Medizinprodukte, Maschinen, Spielzeug) muessen die Anforderungen vollstaendig erfuellen. Die gesamte Verordnung ist nun ohne Ausnahme anwendbar.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Section 4: Pflichten fuer Anbieter */}
          <section id="pflichten-anbieter">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              4. Pflichten fuer Anbieter von Hochrisiko-KI
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Anbieter (Provider) sind Unternehmen oder Personen, die ein KI-System entwickeln oder entwickeln lassen und es unter eigenem Namen auf den Markt bringen. Die Anforderungen an Anbieter von Hochrisiko-KI sind die umfangreichsten im gesamten Regulierungsrahmen. Artikel 8 bis 15 der Verordnung definieren sechs Kernpflichten:
            </p>

            <div className="space-y-6 mt-6">
              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.1</span>
                  Risikomanagementsystem (Art. 9)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  Anbieter muessen ein kontinuierliches Risikomanagementsystem einrichten, das den gesamten Lebenszyklus des KI-Systems abdeckt. Dieses System muss bekannte und vorhersehbare Risiken identifizieren und analysieren, Risiken bewerten, die bei bestimmungsgemaeSSem Gebrauch sowie bei vernuenftigerweise vorhersehbarer Fehlanwendung auftreten koennen, und geeignete Risikominderungsmassnahmen umsetzen. Das Risikomanagement ist kein einmaliger Akt, sondern ein iterativer Prozess, der regelmaessig aktualisiert werden muss.
                </p>
              </div>

              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.2</span>
                  Daten-Governance (Art. 10)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  Trainings-, Validierungs- und Testdaten muessen strengen Qualitaetsanforderungen genuegen. Datensaetze muessen relevant, repraesentativ, fehlerfrei und vollstaendig sein. Anbieter muessen Verzerrungen (Bias) in den Daten erkennen und beheben. Besondere Sorgfaltspflichten gelten beim Umgang mit besonderen Kategorien personenbezogener Daten (Art. 9 DSGVO). Die Datensaetze muessen dokumentiert und nachvollziehbar sein.
                </p>
              </div>

              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.3</span>
                  Technische Dokumentation (Art. 11)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  Vor dem Inverkehrbringen muss eine umfassende technische Dokumentation erstellt werden. Diese umfasst eine allgemeine Beschreibung des KI-Systems, detaillierte Informationen zur Entwicklung (einschliesslich Trainingsmethoden und verwendeter Daten), die Architektur des Systems, die Konformitaetsbewertung und Gebrauchsanweisungen. Die Dokumentation muss regelmaessig aktualisiert und auf Anfrage den Aufsichtsbehoerden vorgelegt werden.
                </p>
              </div>

              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.4</span>
                  Transparenz und Bereitstellung von Informationen (Art. 13)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  Hochrisiko-KI-Systeme muessen so konzipiert sein, dass ihr Betrieb hinreichend transparent ist. Nutzer (Deployer) muessen die Ergebnisse des Systems interpretieren und angemessen nutzen koennen. Gebrauchsanweisungen muessen Informationen ueber Leistungsmerkmale, Einschraenkungen, Risiken und Kontrollmassnahmen enthalten. Ein automatisches Protokollierungssystem (Logging) muss implementiert sein.
                </p>
              </div>

              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.5</span>
                  Menschliche Aufsicht (Art. 14)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  KI-Systeme muessen so gestaltet sein, dass sie waehrend der Nutzung von natuerlichen Personen wirksam ueberwacht werden koennen. Dies bedeutet: Personen, die die Aufsicht ueben, muessen die Faehigkeiten und Grenzen des Systems verstehen, Anzeichen von Anomalien erkennen koennen und in der Lage sein, das System jederzeit zu stoppen oder zu uebersteuern. Das &quot;Human-in-the-Loop&quot;-Prinzip ist ein zentrales Element des EU AI Act.
                </p>
              </div>

              <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-3">
                  <span className="text-primary-600 mr-2">4.6</span>
                  Genauigkeit, Robustheit und Cybersicherheit (Art. 15)
                </h3>
                <p className="text-gray-600 leading-relaxed mb-4">
                  Hochrisiko-KI-Systeme muessen ein angemessenes Niveau an Genauigkeit, Robustheit und Cybersicherheit erreichen. Die Leistungswerte muessen in der technischen Dokumentation angegeben werden. Systeme muessen widerstandsfaehig gegen Fehler, Manipulationsversuche (Adversarial Attacks) und Datenvergiftung (Data Poisoning) sein. Regelmaessige Tests und Validierungen sind erforderlich, um die Zuverlaessigkeit sicherzustellen.
                </p>
              </div>
            </div>
          </section>

          {/* Section 5: Pflichten fuer Nutzer */}
          <section id="pflichten-nutzer">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              5. Pflichten fuer Nutzer (Deployer) von KI-Systemen
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Auch Unternehmen, die KI-Systeme nicht selbst entwickeln, sondern von Drittanbietern beziehen und in ihren Geschaeftsprozessen einsetzen, haben Pflichten unter dem EU AI Act. Der Verordnungstext verwendet hierfuer den Begriff &quot;Deployer&quot; (Betreiber/Nutzer). Die folgenden Pflichten sind besonders relevant:
            </p>

            <div className="bg-slate-50 rounded-xl p-6 mt-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">1</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Bestimmungsgemaeasser Einsatz</h3>
                  <p className="text-gray-600 text-sm">Hochrisiko-KI-Systeme duerfen nur gemaess der vom Anbieter bereitgestellten Gebrauchsanweisung eingesetzt werden. Eine Verwendung ausserhalb des vorgesehenen Zwecks kann den Deployer selbst zum Anbieter machen -- mit allen damit verbundenen Pflichten.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">2</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Menschliche Aufsicht gewaehrleisten</h3>
                  <p className="text-gray-600 text-sm">Deployer muessen sicherstellen, dass die Personen, die fuer die menschliche Aufsicht zustaendig sind, ausreichend geschult und kompetent sind. Diese Personen muessen die Autoritaet und die Moeglichkeit haben, Ergebnisse des KI-Systems zu uebersteuern oder das System abzuschalten.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">3</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Eingabedatenqualitaet</h3>
                  <p className="text-gray-600 text-sm">Soweit der Deployer Kontrolle ueber die Eingabedaten hat, muss er sicherstellen, dass diese dem Verwendungszweck des Systems angemessen und repraesentativ sind.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">4</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Monitoring und Meldepflichten</h3>
                  <p className="text-gray-600 text-sm">Deployer muessen den Betrieb des KI-Systems ueberwachen und den Anbieter sowie die zustaendige Behoerde informieren, wenn sie Grund zur Annahme haben, dass das System ein Risiko darstellt. Schwerwiegende Vorfaelle muessen gemeldet werden.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">5</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Datenschutz-Folgenabschaetzung (DSFA)</h3>
                  <p className="text-gray-600 text-sm">Wenn der Einsatz eines Hochrisiko-KI-Systems die Verarbeitung personenbezogener Daten umfasst, muessen Deployer vor dem Einsatz eine Datenschutz-Folgenabschaetzung gemaess Art. 35 DSGVO durchfuehren. Das Ergebnis der vom Anbieter bereitgestellten Grundrechte-Folgenabschaetzung ist hierbei zu beruecksichtigen.</p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
                  <span className="text-primary-700 font-bold text-sm">6</span>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-1">Aufbewahrung automatisch erzeugter Protokolle</h3>
                  <p className="text-gray-600 text-sm">Die vom KI-System automatisch erzeugten Protokolle muessen mindestens sechs Monate lang aufbewahrt werden, sofern nicht in anderen Rechtsvorschriften laengere Aufbewahrungsfristen vorgesehen sind.</p>
                </div>
              </div>
            </div>
          </section>

          {/* Section 6: Strafen */}
          <section id="strafen">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              6. Strafen bei Verstoss
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Der EU AI Act sieht ein dreistufiges Bussgeld-System vor, das sich an der Schwere des Verstosses orientiert. Aehnlich wie bei der DSGVO sind die Hoechstbetraege abschreckend hoch und richten sich nach dem weltweiten Jahresumsatz des Unternehmens. Fuer KMU und Start-ups gelten mildere Obergrenzen.
            </p>

            <div className="space-y-4 mt-6">
              <div className="bg-red-50 border border-red-200 rounded-xl p-6">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="text-xl font-semibold text-gray-800">Verbotene KI-Praktiken</h3>
                  <span className="px-3 py-1 bg-red-100 text-red-700 text-sm font-bold rounded-full">Hoechststufe</span>
                </div>
                <div className="grid sm:grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-white rounded-lg">
                    <p className="text-3xl font-bold text-red-600">35 Mio. EUR</p>
                    <p className="text-sm text-gray-500 mt-1">oder</p>
                    <p className="text-xl font-bold text-red-600">7 % des Jahresumsatzes</p>
                    <p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
                  </div>
                  <div className="flex items-center">
                    <p className="text-sm text-gray-600">
                      Gilt fuer den Einsatz verbotener KI-Praktiken (Art. 5) und Verstoesse gegen die Anforderungen an Daten fuer das Training von KI-Systemen bei Minderjaerigen.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="text-xl font-semibold text-gray-800">Verstoesse gegen Kernpflichten</h3>
                  <span className="px-3 py-1 bg-orange-100 text-orange-700 text-sm font-bold rounded-full">Mittelstufe</span>
                </div>
                <div className="grid sm:grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-white rounded-lg">
                    <p className="text-3xl font-bold text-orange-600">15 Mio. EUR</p>
                    <p className="text-sm text-gray-500 mt-1">oder</p>
                    <p className="text-xl font-bold text-orange-600">3 % des Jahresumsatzes</p>
                    <p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
                  </div>
                  <div className="flex items-center">
                    <p className="text-sm text-gray-600">
                      Gilt fuer Verstoesse gegen die Pflichten fuer Anbieter und Deployer von Hochrisiko-KI-Systemen, einschliesslich Risikomanagement, Daten-Governance, Transparenz und menschliche Aufsicht.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="text-xl font-semibold text-gray-800">Falsche Angaben gegenueber Behoerden</h3>
                  <span className="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm font-bold rounded-full">Grundstufe</span>
                </div>
                <div className="grid sm:grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-white rounded-lg">
                    <p className="text-3xl font-bold text-yellow-600">7,5 Mio. EUR</p>
                    <p className="text-sm text-gray-500 mt-1">oder</p>
                    <p className="text-xl font-bold text-yellow-600">1 % des Jahresumsatzes</p>
                    <p className="text-xs text-gray-400 mt-1">(der hoehere Betrag gilt)</p>
                  </div>
                  <div className="flex items-center">
                    <p className="text-sm text-gray-600">
                      Gilt fuer die Bereitstellung unrichtiger, unvollstaendiger oder irrefuehrender Informationen an Aufsichtsbehoerden oder benannte Stellen.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-primary-50 border border-primary-200 rounded-xl p-6 my-8">
              <div className="flex items-start gap-3">
                <svg className="w-6 h-6 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                  <p className="font-semibold text-primary-900 mb-1">KMU-Erleichterungen</p>
                  <p className="text-primary-800 text-sm">
                    Fuer kleine und mittlere Unternehmen (KMU) sowie Start-ups gelten verhaeltnismaessig niedrigere Bussgeld-Obergrenzen. Zudem sollen die Aufsichtsbehoerden bei der Festsetzung von Bussgeldern die wirtschaftliche Leistungsfaehigkeit des Unternehmens beruecksichtigen. Die Verordnung sieht auch &quot;Regulatory Sandboxes&quot; vor -- kontrollierte Testumgebungen, in denen KMU und Start-ups innovative KI-Systeme unter Aufsicht entwickeln und testen koennen.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Section 7: Checkliste */}
          <section id="checkliste">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              7. Checkliste: Ist Ihr Unternehmen betroffen?
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Die folgenden fuenf Fragen helfen Ihnen, eine erste Einschaetzung vorzunehmen, ob und in welchem Umfang Ihr Unternehmen von den Pflichten des EU AI Act betroffen ist. Je mehr Fragen Sie mit &quot;Ja&quot; beantworten, desto dringender sollten Sie sich mit der Regulierung befassen.
            </p>

            <div className="space-y-4 mt-6">
              <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white">
                      <svg className="w-4 h-4 text-primary-600 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 1: Setzen Sie KI-Systeme ein?</h3>
                    <p className="text-gray-600 text-sm">
                      Nutzt Ihr Unternehmen Software, die auf Machine Learning, Deep Learning, Natural Language Processing oder anderen KI-Techniken basiert? Dies schliesst auch eingekaufte SaaS-Loesungen, eingebettete KI-Funktionen in bestehender Software und den Einsatz von APIs grosser KI-Anbieter (z.B. OpenAI, Google, Anthropic) ein.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 2: Treffen KI-Systeme Entscheidungen ueber Personen?</h3>
                    <p className="text-gray-600 text-sm">
                      Werden KI-Systeme eingesetzt, um Entscheidungen zu treffen oder vorzubereiten, die natuerliche Personen betreffen? Dazu gehoeren Bewerberauswahl, Leistungsbewertung, Kreditwuerdigkeitspruefung, Versicherungseinstufung, Zugang zu Bildung, Sozialleistungen oder oeffentlichen Diensten.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 3: Entwickeln oder vertreiben Sie KI-Systeme?</h3>
                    <p className="text-gray-600 text-sm">
                      Sind Sie Anbieter (Provider) eines KI-Systems, das in der EU auf den Markt gebracht oder in Betrieb genommen wird? Auch das Rebranding oder wesentliche Veraendern eines bestehenden KI-Systems kann Sie zum Anbieter im Sinne der Verordnung machen. Pruefen Sie, ob Sie als Provider, Deployer, Importeur oder Haendler einzustufen sind.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 4: Nutzen Sie KI in einem regulierten Sektor?</h3>
                    <p className="text-gray-600 text-sm">
                      Ist Ihr Unternehmen in einem der in Anhang III genannten Bereiche taetig? Dazu gehoeren unter anderem: Bildung, Personalwesen, kritische Infrastruktur, Finanzdienstleistungen, Gesundheitswesen, Strafverfolgung, Migration und Justiz. In diesen Sektoren ist die Wahrscheinlichkeit hoch, dass Ihre KI-Systeme als Hochrisiko eingestuft werden.
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-primary-300 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-slate-300 rounded flex items-center justify-center bg-white" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">Frage 5: Haben Sie bereits ein KI-Inventar?</h3>
                    <p className="text-gray-600 text-sm">
                      Wissen Sie, welche KI-Systeme in Ihrem Unternehmen im Einsatz sind, wer sie anbietet, welche Daten sie verarbeiten und welche Entscheidungen sie beeinflussen? Ein vollstaendiges KI-Portfolio ist der erste Schritt zur Compliance. Ohne Ueberblick ueber die eigene KI-Landschaft ist eine Risikobewertung unmoeglich.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-slate-50 border border-slate-200 rounded-xl p-6 mt-8">
              <p className="text-sm text-gray-600">
                <span className="font-semibold text-gray-900">Auswertung: </span>
                Wenn Sie mindestens eine der obigen Fragen mit &quot;Ja&quot; beantwortet haben, sind Sie mit hoher Wahrscheinlichkeit vom EU AI Act betroffen. Bei zwei oder mehr Ja-Antworten empfehlen wir eine detaillierte Analyse Ihrer KI-Systeme und eine formelle Risikoeinstufung. Je frueher Sie beginnen, desto mehr Zeit bleibt fuer die Umsetzung der erforderlichen Massnahmen vor den jeweiligen Stichtagen.
              </p>
            </div>
          </section>

          {/* Section 8: BreakPilot Comply */}
          <section id="breakpilot-comply">
            <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-4">
              8. Wie BreakPilot Comply hilft
            </h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              BreakPilot Comply unterstuetzt Unternehmen dabei, die Anforderungen des EU AI Act strukturiert und effizient umzusetzen. Unsere Plattform wurde speziell fuer die Herausforderungen der KI-Regulierung entwickelt und bietet zwei Kernmodule:
            </p>

            <div className="grid sm:grid-cols-2 gap-6 mt-6">
              <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-xl p-6 border border-primary-200">
                <div className="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">AI Portfolio</h3>
                <p className="text-gray-600 text-sm">
                  Erfassen Sie alle KI-Systeme Ihres Unternehmens in einem zentralen Verzeichnis. Klassifizieren Sie jedes System nach Risikokategorie, dokumentieren Sie Anbieter, Verwendungszweck, verarbeitete Daten und verantwortliche Personen. Das AI Portfolio schafft die Transparenz, die fuer eine fundierte Compliance-Bewertung notwendig ist.
                </p>
              </div>

              <div className="bg-gradient-to-br from-accent-50 to-accent-100 rounded-xl p-6 border border-accent-200">
                <div className="w-12 h-12 bg-accent-500 rounded-xl flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold text-gray-800 mt-0 mb-2">UCCA Assessment</h3>
                <p className="text-gray-600 text-sm">
                  Fuehren Sie fuer jedes KI-System eine strukturierte Anwendungsfall-Konformitaetsbewertung (Use Case Conformity Assessment) durch. Unser gefuehrter Prozess leitet Sie durch die Risikoeinstufung, identifiziert relevante Pflichten und generiert die erforderliche Dokumentation -- von der technischen Beschreibung bis zum Risikomanagementplan.
                </p>
              </div>
            </div>
          </section>

          {/* CTA Section */}
          <section className="mt-16 mb-8 bg-gradient-to-br from-primary-600 to-primary-700 rounded-2xl p-8 text-center text-white">
            <h2 className="text-2xl font-bold mb-3">Bereit fuer den EU AI Act?</h2>
            <p className="text-primary-100 mb-6 max-w-lg mx-auto">
              Starten Sie jetzt mit der Bestandsaufnahme Ihrer KI-Systeme und stellen Sie rechtzeitig Compliance sicher.
            </p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <Link
                href="/kontakt"
                className="inline-flex items-center justify-center px-6 py-3 bg-white text-primary-700 rounded-xl font-medium hover:bg-primary-50 transition-colors"
              >
                Beratungsgespraech vereinbaren
              </Link>
              <Link
                href="/blog"
                className="inline-flex items-center justify-center px-6 py-3 border border-white/30 text-white rounded-xl font-medium hover:bg-white/10 transition-colors"
              >
                Weitere Artikel lesen
              </Link>
            </div>
          </section>

          {/* Disclaimer */}
          <div className="mt-8 p-4 bg-slate-50 rounded-lg border border-slate-200">
            <p className="text-xs text-slate-500">
              <span className="font-semibold">Hinweis:</span> Dieser Artikel dient ausschliesslich zu Informationszwecken und stellt keine Rechtsberatung dar. Die Inhalte wurden mit Sorgfalt recherchiert, koennen jedoch aufgrund der sich entwickelnden Regulierungslandschaft und nationaler Umsetzungsgesetze Aenderungen unterliegen. Fuer verbindliche Auskuenfte wenden Sie sich bitte an einen spezialisierten Rechtsberater. Stand: Februar 2025.
            </p>
          </div>

        </div>
      </article>

    </div>
  )
}