EU AI Act Kurzüberblick
Trainer-tauglicher One-Pager zum EU AI Act aus Sicht von Unternehmen, die KI im Alltag nutzen.
Prompt
Erstelle in einem Unterordner unter agentic-workflow-design eine HTML-Seite mit der Zusammenfassung des EU-AI-Act, aufbereitet mit Farben und ansprechendem Design. Gehe vor allem darauf ein, wie sich das für Firmen auswirkt, die KI einfach nutzen.
Antwort
Ergebnis: statischer One-Pager unter eu-ai-act-kurzueberblick/index.html. Fokus: Rollenklärung, Risikoklassen, Pflichten für KI-Nutzer, Umsetzungsfahrplan und Fristen. Aktuelle EU-Fristen wurden gegengeprüft; Desktop und Mobile wurden per Rendercheck ohne horizontale Überbreite verifiziert.
Ergebnis
HTML anzeigen
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EU AI Act für KI-Nutzer</title>
<style>
:root {
color-scheme: light;
--bg: #f7f9fc;
--paper: #ffffff;
--ink: #162033;
--muted: #5d6b80;
--line: #dce4ef;
--blue: #174ea6;
--blue-soft: #e8f0fe;
--teal: #00796b;
--teal-soft: #e0f2ef;
--amber: #b46b00;
--amber-soft: #fff2d6;
--red: #b42318;
--red-soft: #ffe4df;
--violet: #5b45b8;
--violet-soft: #ede9fe;
--shadow: 0 18px 50px rgba(22, 32, 51, 0.12);
--radius: 8px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background:
linear-gradient(90deg, rgba(23, 78, 166, 0.06) 1px, transparent 1px),
linear-gradient(180deg, rgba(23, 78, 166, 0.05) 1px, transparent 1px),
var(--bg);
background-size: 42px 42px;
color: var(--ink);
letter-spacing: 0;
}
a {
color: var(--blue);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.page {
width: min(1180px, calc(100vw - 32px));
margin: 0 auto;
padding: 30px 0 56px;
}
.hero {
min-height: 78vh;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
gap: 28px;
align-items: center;
padding: 18px 0 34px;
}
.hero-copy {
padding: 28px 0;
}
h1 {
max-width: 820px;
margin: 0;
font-size: clamp(3rem, 7vw, 6.7rem);
line-height: 0.9;
font-weight: 820;
letter-spacing: 0;
}
.hero p {
max-width: 720px;
margin: 24px 0 0;
color: var(--muted);
font-size: clamp(1.08rem, 1.9vw, 1.32rem);
line-height: 1.55;
}
.hero strong { color: var(--ink); }
.nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.nav a {
display: inline-flex;
align-items: center;
min-height: 40px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
padding: 8px 14px;
color: var(--ink);
font-size: 0.9rem;
font-weight: 740;
text-decoration: none;
box-shadow: 0 8px 20px rgba(22, 32, 51, 0.06);
}
.nav a:hover {
border-color: rgba(23, 78, 166, 0.45);
color: var(--blue);
}
.hero-panel {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
}
.panel-title {
margin: 0 0 14px;
font-size: 0.78rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 820;
}
.impact-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.impact-list li {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 13px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
}
.mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 8px;
background: var(--blue-soft);
color: var(--blue);
font-size: 1.15rem;
font-weight: 850;
}
.mark.teal { background: var(--teal-soft); color: var(--teal); }
.mark.amber { background: var(--amber-soft); color: var(--amber); }
.mark.red { background: var(--red-soft); color: var(--red); }
.impact-list b {
display: block;
margin-bottom: 4px;
font-size: 1rem;
}
.impact-list span {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.42;
}
section {
padding: 38px 0;
border-top: 1px solid var(--line);
}
.section-head {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.42fr);
gap: 24px;
align-items: end;
margin-bottom: 22px;
}
h2 {
margin: 0;
font-size: clamp(1.9rem, 3vw, 3.2rem);
line-height: 1;
font-weight: 820;
}
.section-head p {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 1rem;
}
.risk-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.risk {
min-height: 255px;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
overflow: clip;
box-shadow: 0 12px 30px rgba(22, 32, 51, 0.07);
}
.risk .top {
min-height: 82px;
padding: 14px 15px;
border-bottom: 1px solid var(--line);
}
.risk.minimal .top { background: var(--teal-soft); }
.risk.limited .top { background: var(--blue-soft); }
.risk.high .top { background: var(--amber-soft); }
.risk.forbidden .top { background: var(--red-soft); }
.risk h3 {
margin: 0;
font-size: 1.14rem;
line-height: 1.15;
}
.risk small {
display: block;
margin-top: 7px;
color: var(--muted);
line-height: 1.35;
font-weight: 680;
}
.risk p {
margin: 0;
padding: 14px 15px 0;
color: var(--muted);
line-height: 1.5;
font-size: 0.93rem;
}
.risk ul {
margin: auto 0 0;
padding: 14px 15px 16px 34px;
color: var(--ink);
font-size: 0.9rem;
line-height: 1.45;
}
.compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.role {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 20px;
box-shadow: 0 12px 30px rgba(22, 32, 51, 0.07);
}
.role h3 {
margin: 0 0 10px;
font-size: 1.35rem;
}
.role p {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.role.deployer { border-top: 5px solid var(--teal); }
.role.provider { border-top: 5px solid var(--violet); }
.duties {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.duty {
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.9);
padding: 16px;
}
.duty h3 {
display: flex;
gap: 10px;
align-items: center;
margin: 0 0 9px;
font-size: 1.05rem;
line-height: 1.25;
}
.dot {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--teal);
}
.duty:nth-child(2n) .dot { background: var(--blue); }
.duty:nth-child(3n) .dot { background: var(--amber); }
.duty p {
margin: 0;
color: var(--muted);
font-size: 0.93rem;
line-height: 1.48;
}
.timeline {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: clip;
background: var(--paper);
box-shadow: 0 12px 30px rgba(22, 32, 51, 0.07);
}
.time {
min-height: 144px;
padding: 16px;
border-right: 1px solid var(--line);
}
.time:last-child { border-right: 0; }
.time b {
display: block;
font-size: 1.08rem;
margin-bottom: 8px;
color: var(--blue);
}
.time span {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.45;
}
.checklist {
counter-reset: steps;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.checklist li {
counter-increment: steps;
position: relative;
min-height: 98px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 17px 18px 17px 64px;
}
.checklist li::before {
content: counter(steps);
position: absolute;
left: 18px;
top: 17px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--blue);
color: white;
font-weight: 830;
}
.checklist b {
display: block;
margin-bottom: 5px;
font-size: 1.02rem;
}
.checklist span {
color: var(--muted);
line-height: 1.45;
font-size: 0.93rem;
}
.callout {
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 18px;
align-items: center;
margin-top: 20px;
border: 1px solid #b7d4ff;
border-radius: var(--radius);
background: linear-gradient(135deg, #f3f7ff, #ffffff);
padding: 20px;
box-shadow: 0 12px 30px rgba(23, 78, 166, 0.08);
}
.callout .symbol {
display: grid;
place-items: center;
width: 68px;
height: 68px;
border-radius: 8px;
background: var(--blue);
color: white;
font-size: 2rem;
font-weight: 850;
}
.callout h3 {
margin: 0 0 6px;
font-size: 1.42rem;
}
.callout p {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.sources {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.55;
}
.sources p {
margin: 0 0 8px;
}
@media (max-width: 920px) {
.hero,
.section-head,
.compare {
grid-template-columns: 1fr;
}
.hero {
min-height: auto;
padding-top: 20px;
}
.risk-grid,
.duties,
.timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.time {
border-right: 0;
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 640px) {
.page {
width: min(100% - 22px, 1180px);
padding-top: 14px;
}
h1 {
font-size: clamp(2.58rem, 16vw, 4rem);
}
.hero-panel,
.role,
.callout {
padding: 15px;
}
.risk-grid,
.duties,
.timeline,
.checklist {
grid-template-columns: 1fr;
}
.checklist li {
padding-left: 60px;
}
.callout {
grid-template-columns: 1fr;
}
}
@media print {
body { background: white; }
.page { width: auto; padding: 0; }
.hero { min-height: auto; }
.nav { display: none; }
.hero-panel,
.risk,
.role,
.duty,
.timeline,
.checklist li,
.callout {
box-shadow: none;
}
}
</style>
</head>
<body>
<main class="page">
<header class="hero">
<div class="hero-copy">
<h1>EU AI Act für KI-Nutzer</h1>
<p>
Der AI Act reguliert KI risikobasiert. Für Firmen, die KI einfach im
Arbeitsalltag nutzen, ist die wichtigste Botschaft: <strong>nicht jede
Nutzung wird zum Zertifizierungsprojekt</strong>, aber jede Nutzung
braucht klare Regeln, geschulte Menschen und einen Blick auf Risiko,
Daten und Transparenz.
</p>
<nav class="nav" aria-label="Seitenbereiche">
<a href="#rollen">Rollen</a>
<a href="#risiken">Risikoklassen</a>
<a href="#pflichten">Was Firmen tun müssen</a>
<a href="#fahrplan">Fahrplan</a>
</nav>
</div>
<aside class="hero-panel" aria-label="Kernaussagen">
<p class="panel-title">Kurz gesagt</p>
<ul class="impact-list">
<li>
<span class="mark teal">1</span>
<span><b>Normale Office-KI bleibt meist Low Risk.</b> Texte, Zusammenfassungen, Übersetzungen, Code-Hilfe und Recherche brauchen vor allem Governance.</span>
</li>
<li>
<span class="mark amber">2</span>
<span><b>HR, Kredit, Bildung und Gesundheit sind Warnzonen.</b> Dort kann ein Use-Case schnell High-Risk werden.</span>
</li>
<li>
<span class="mark red">3</span>
<span><b>Einige Praktiken sind verboten.</b> Manipulation, Social Scoring und bestimmte biometrische oder emotionserkennende Einsätze gehören nicht in Piloten.</span>
</li>
</ul>
</aside>
</header>
<section id="rollen">
<div class="section-head">
<h2>Erst die Rolle klären</h2>
<p>Die meisten Unternehmen sind beim internen Einsatz von KI nicht Anbieter, sondern Deployer: Sie nutzen ein System beruflich.</p>
</div>
<div class="compare">
<article class="role deployer">
<h3>Deployer: KI beruflich nutzen</h3>
<p>
Typisch für Unternehmen, die ChatGPT, Microsoft Copilot, GitHub
Copilot, DeepL, Meeting-Zusammenfassungen oder andere KI-Tools im
Betrieb einsetzen. Die Pflichten hängen vom konkreten Zweck und
vom Risiko ab.
</p>
</article>
<article class="role provider">
<h3>Provider: KI-System anbieten</h3>
<p>
Relevant, wenn eine Firma ein KI-System entwickelt, wesentlich
verändert, unter eigenem Namen vertreibt oder als KI-Funktion in
ein eigenes Produkt einbaut. Dann liegt deutlich mehr Compliance
beim Unternehmen.
</p>
</article>
</div>
</section>
<section id="risiken">
<div class="section-head">
<h2>Die Risikokarte</h2>
<p>Der AI Act schaut nicht nur auf das Modell, sondern vor allem auf den Zweck: Wofür wird KI eingesetzt und welche Folgen kann der Output haben?</p>
</div>
<div class="risk-grid">
<article class="risk minimal">
<div class="top">
<h3>Minimal Risk</h3>
<small>Der Normalfall für interne Produktivität</small>
</div>
<p>Beispiele sind Textentwürfe, Recherche, Übersetzung, Code-Vorschläge, Brainstorming und Meeting-Notizen.</p>
<ul>
<li>AI Literacy</li>
<li>Richtlinie</li>
<li>Daten- und Security-Regeln</li>
</ul>
</article>
<article class="risk limited">
<div class="top">
<h3>Limited Risk</h3>
<small>Transparenz, wenn Menschen betroffen sind</small>
</div>
<p>Chatbots, Deepfakes, KI-generierte öffentliche Inhalte oder biometrische Kategorisierung müssen erkennbar sein.</p>
<ul>
<li>KI-Kennzeichnung</li>
<li>Nutzer informieren</li>
<li>Oeffentliche Inhalte prüfen</li>
</ul>
</article>
<article class="risk high">
<div class="top">
<h3>High Risk</h3>
<small>Erlaubt, aber stark reguliert</small>
</div>
<p>Typische Warnzonen: Recruiting, Leistungsbewertung, Kredit, Gesundheit, Bildung, kritische Infrastruktur und Produktsicherheit.</p>
<ul>
<li>Human Oversight</li>
<li>Monitoring und Logging</li>
<li>Incident-Prozess</li>
</ul>
</article>
<article class="risk forbidden">
<div class="top">
<h3>Verboten</h3>
<small>Nicht als Experiment behandeln</small>
</div>
<p>Darunter fallen etwa Social Scoring, manipulative oder ausnutzende Systeme und bestimmte biometrische oder emotionserkennende Einsätze.</p>
<ul>
<li>Vorher Rechtsprüfung</li>
<li>Keine Schattenpiloten</li>
<li>Beschaffung sperren</li>
</ul>
</article>
</div>
</section>
<section id="pflichten">
<div class="section-head">
<h2>Was Firmen konkret tun müssen</h2>
<p>Für reine Nutzer ist der pragmatische Start kein großer Zertifizierungsapparat, sondern ein belastbares Betriebsmodell für KI im Alltag.</p>
</div>
<div class="duties">
<article class="duty">
<h3><span class="dot"></span>KI-Inventar</h3>
<p>Welche Tools werden genutzt, von wem, wofür, mit welchen Daten und welchem Output? Ohne Inventar bleibt Risiko unsichtbar.</p>
</article>
<article class="duty">
<h3><span class="dot"></span>AI Literacy</h3>
<p>Mitarbeitende müssen Risiken, Grenzen, Datenschutz, Halluzinationen, Bias, Security und Freigabewege verstehen.</p>
</article>
<article class="duty">
<h3><span class="dot"></span>KI-Richtlinie</h3>
<p>Erlaubte Tools, verbotene Datenarten, Review-Pflichten, Kundenkommunikation und Eskalationen klar regeln.</p>
</article>
<article class="duty">
<h3><span class="dot"></span>Datenschutz und Security</h3>
<p>AVV/DPA, Speicherort, Training mit Eingaben, Zugriffskontrolle, SSO, Audit Logs und Löschkonzepte prüfen.</p>
</article>
<article class="duty">
<h3><span class="dot"></span>Transparenz</h3>
<p>Wenn Menschen mit KI interagieren oder KI-generierte Inhalte veröffentlicht werden, Kennzeichnung und Kontext prüfen.</p>
</article>
<article class="duty">
<h3><span class="dot"></span>High-Risk-Check</h3>
<p>Use-Cases in HR, Kredit, Bildung, Gesundheit, kritischer Infrastruktur und Arbeitsplatzüberwachung nicht niedrigschwellig freigeben.</p>
</article>
</div>
<div class="callout">
<div class="symbol" aria-hidden="true">!</div>
<div>
<h3>Die wichtigste Leitfrage</h3>
<p>
Trifft oder beeinflusst KI eine Entscheidung über Menschen,
Rechte, Zugang, Bewertung oder Sicherheit? Wenn ja, braucht der
Use-Case eine bewusste Klassifikation statt einer schnellen
Tool-Freigabe.
</p>
</div>
</div>
</section>
<section id="fahrplan">
<div class="section-head">
<h2>Umsetzungsfahrplan</h2>
<p>Ein schlanker Einstieg reicht oft aus, solange er verbindlich ist und echte Nutzung sichtbar macht.</p>
</div>
<ol class="checklist">
<li><b>Use-Cases sammeln</b><span>Interviews, Tool-Liste, Schattennutzung und Fachbereichsbedarf zusammenführen.</span></li>
<li><b>Risiko klassifizieren</b><span>Minimal, transparenzpflichtig, High-Risk oder verboten; Zweifelsfälle sauber markieren.</span></li>
<li><b>Datenregeln festlegen</b><span>Personenbezogene Daten, Geheimnisse, Kundendaten und produktive Systeme getrennt betrachten.</span></li>
<li><b>Vendor prüfen</b><span>Verträge, Subprozessoren, Speicherorte, Training mit Daten, Sicherheit und Dokumentation abfragen.</span></li>
<li><b>Menschen befähigen</b><span>Schulung und kurze Arbeitshilfen für Alltagssituationen statt reiner Prompting-Tipps.</span></li>
<li><b>Betrieb überwachen</b><span>Verantwortliche benennen, Beschwerden und Fehler erfassen, Richtlinie regelmäßig aktualisieren.</span></li>
</ol>
</section>
<section>
<div class="section-head">
<h2>Wichtige Daten</h2>
<p>Die Fristen sind relevant für Planung und Beschaffung. Sie ersetzen keine Rechtsberatung.</p>
</div>
<div class="timeline">
<div class="time"><b>02.02.2025</b><span>AI-Literacy-Pflicht und Verbote bestimmter KI-Praktiken gelten.</span></div>
<div class="time"><b>02.08.2025</b><span>GPAI-Regeln gelten für neue General-Purpose-AI-Modelle.</span></div>
<div class="time"><b>02.08.2026</b><span>Transparenzpflichten und weitere Kernregeln werden wirksam.</span></div>
<div class="time"><b>02.12.2027</b><span>Nach aktuellem EU-Omnibus-Stand: High-Risk-Regeln für Annex-III-Systeme.</span></div>
<div class="time"><b>02.08.2028</b><span>High-Risk-Regeln für KI als Sicherheitskomponente regulierter Produkte.</span></div>
</div>
</section>
<section class="sources" aria-label="Hinweise">
<p><strong>Hinweis:</strong> Keine Rechtsberatung. Stand der Zusammenfassung: 02.07.2026.</p>
<p>
Orientierung: EU-Kommission zu AI Act, AI Literacy, Transparenzpflichten
und GPAI-Leitlinien; konsolidierter AI-Act-Text zu Provider-Pflichten.
</p>
</section>
</main>
</body>
</html>