/* ========================================
KI-KENNZEICHNUNG AM BEITRAGSBILD
Art. 50 Abs. 4 AI Act, ab 2026-08-02
Diese Datei wird auf JEDER Seite geladen, nicht nur im Artikel. Das Beitragsbild
erscheint auch als Teaser auf Startseite, Ratgeber, Archiv, Suche und Autorenseite —
und dort ist es fuer viele Leser der erste Kontakt mit dem Bild. Art. 50 Abs. 5
verlangt die Kennzeichnung "spaetestens zum Zeitpunkt der ersten Konfrontation",
also genau dort und nicht erst auf der Artikelseite.
Das Label sitzt IM Bild, nicht darunter: Der Code of Practice zu Art. 50
(Sub-measure 1.2.1 c) laesst neben dem eingebrannten Label nur ein Overlay zu,
"that for natural persons appears to be on the content". Eine Bildunterschrift
erfuellt das nicht.
Das Zeichen im Artikel ist das "AI GENERATED"-Label der EU-Kommission
(assets/img/eu-ai-label-generated.svg, weisse Variante), frei nutzbar ohne
Namensnennung. Icon und Wort kommen als EIN Asset aus dem offiziellen Satz statt als
Eigenbau aus Icon plus HTML-Text: So steht auf dem Bild exakt das Zeichen, das die
Kommission veroeffentlicht -- gleiche Proportionen, gleiche Schrift, gleiche Pille.
Groesse, Kontrast, Farbe und Typografie stellt Measure 1.1 c des Code of Practice
ausdruecklich frei, solange die Offenlegung "clear and distinguishable" bleibt. An der
Form des Zeichens aendern wir trotzdem nichts -- Wiedererkennbarkeit ist der ganze Zweck
eines gemeinsamen Zeichens. Beschnitten ist nur die Zeichenflaeche der Datei
(Begruendung im Kopf der SVG), nicht das Zeichen darin.
Welches der drei EU-Zeichen wo steht, haengt daran, ob daneben Text steht:
- Beitragsbild im Artikel: das Lockup "AI GENERATED" (eu-ai-label-generated.svg), voll
deckend, bis 85px breit. Darunter steht die Zeile "Symbolbild, mit KI erstellt".
- Teaser-Kacheln: das Basis-Icon, der Kreis mit "AI" (eu-ai-label-basic.svg), 20px, Flaeche
auf 70% Deckkraft. Dort liegt das Zeichen auf kleiner Flaeche ueber ueberwiegend hellen
Illustrationen und draengt sich sonst vor das Motiv.
Beide Abweichungen deckt Measure 1.1 c, das Groesse und Kontrast ausdruecklich freistellt,
solange die Offenlegung "clear and distinguishable" bleibt. Measure 1.1 a verlangt als
Hauptelement ohnehin nur das grossgeschriebene "AI"; das Wort daneben steht in 1.1 b und
ist empfohlen, nicht verpflichtend.
Der Preis des Kreises steht in Annex 1: Das Basis-Icon ist dort fuer den Fall gefuehrt,
dass eine interaktive Ebene oder ein eigenes Textlabel danebensteht, und Varianten mit
Wort schnitten in den Nutzertests der Kommission "signifikant besser" ab. Measure 1.1
verlangt zudem, die Zusammensetzung des Publikums zu beruecksichtigen, und nennt aeltere
Menschen ausdruecklich -- die Leserschaft dieser Seite. Bewusst dennoch so entschieden:
Das "AI" steht im 20px-Kreis genauso hoch wie zuvor in der 85px-Pille (7,7px), waehrend
die belegte Flaeche von rund 1394px2 auf 400px2 faellt. Die Alternative waere gewesen, die
Pille weiter zu schrumpfen -- dann waere "GENERATED" endgueltig unlesbar geworden und
haette trotzdem Flaeche gekostet.
Warum 70% Deckkraft und nicht die offiziellen 50: gemessen an zwoelf echten
Beitragsbildern faellt der Kontrast der Schrift gegen den Grund bei 50% auf 4,5:1 im
schlechtesten Fall -- exakt die WCAG-Schwelle fuer kleinen Text, ohne Reserve fuer ein
kuenftiges helleres Motiv. Bei 70% sind es 8,2:1, bei voller Deckkraft 16,9:1.
======================================== */
/* height: 100% ist nicht kosmetisch. Die Teaser-Container haben eine feste Hoehe
(Startseite 180px, Archiv 200px, verwandte Artikel 140px) und die Bilder darin
height: 100% + object-fit: cover. Ein Wrapper ohne eigene Hoehe unterbricht diese
Kette: Das Bild fiele auf seine natuerliche Hoehe zurueck und wuerde vom
overflow: hidden des Containers oben abgeschnitten statt sauber skaliert.
line-height: 0 verhindert die Grundlinien-Luecke unter dem Bild -- das Label setzt
seine eigene Hoehe.
container-type macht den Wrapper zum Bezugspunkt fuer die Groessenregel weiter unten:
Das Label richtet sich damit nach der Breite des Bildes und nicht nach der des
Browserfensters. Ein Teaser bleibt klein, auch wenn der Schirm breit ist. */
.swk-ai-figure {
position: relative;
display: block;
height: 100%;
line-height: 0;
container-type: inline-size;
}
/* Zwei Zeichen, zwei Orte. Auf dem Beitragsbild im Artikel steht das Lockup mit dem Wort
("AI GENERATED"), auf den Teaser-Kacheln das Basis-Icon der Kommission (der Kreis mit
"AI", ohne Wort). Gemeinsam ist beiden nur, was hier steht: Ecke, Schatten, kein
Mausziel. Groesse und Seitenverhaeltnis unterscheiden sich zu stark, um sie zu teilen.
Der Selektor nennt absichtlich Wrapper UND Element (img.swk-ai-badge statt nur
.swk-ai-badge): Die Kartenstile treffen jedes Bild in ihrem Container --
`.swk-post-image img`, `.swk-archive-card-image img`, `.swk-related-image img`, alle mit
width/height: 100%. Seit das Label selbst ein ![]()
ist und nicht mehr in einem
steckt, faellt es unter diese Regeln. Mit nur einer Klasse waere es spezifisch schwaecher
und wuerde formatfuellend ueber dem Motiv liegen. */
.swk-ai-figure img.swk-ai-badge {
position: absolute;
top: 10px;
right: 10px;
display: block;
height: auto;
/* Die weisse Flaeche traegt den Kontrast fuer die Schrift selbst; der Schatten trennt nur
noch ihre Kante vom Motiv. Ohne ihn verschwindet der Rand auf hellen Illustrationen
(die Beitragsbilder sind ueberwiegend hell), mit einem zu kraeftigen wirkt das Label
aufgeklebt. Ein enger, harter Schatten fuer die Kante plus ein weicher, breiter als
leichte Abdunklung darunter halten es auf hellen wie auf dunklen Motiven sichtbar
("remain visible against any background", Sub-measure 1.2.1 d).
Auf den Kacheln laeuft die Flaeche auf 70% Deckkraft, der Schatten wird aus dieser
Alpha-Maske gerechnet und faellt dort entsprechend schwaecher aus. Das ist gewollt:
Ein Zeichen von 20px braucht keine so harte Kante wie eines von 85px. */
filter:
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
pointer-events: none;
}
/* Der Filter im Plugin legt beide Zeichen ins Markup, weil er den Ort nicht kennt, an dem
das Bild gleich landet -- dasselbe Beitragsbild wird mal Artikelbild, mal Kachel. Erst
hier faellt die Entscheidung, und zwar an der Breite, die das Bild tatsaechlich einnimmt.
Das verworfene Zeichen steht auf display: none und faellt damit auch aus dem
Accessibility-Baum; der alt-Text wird also nicht doppelt vorgelesen.
Der Normalfall ist die Kachel, deshalb ist das Basis-Icon der Default: Faellt die
Container-Query aus, steht immer noch ein gueltiges Label da. */
.swk-ai-figure img.swk-ai-badge--lockup {
display: none;
}
/* Das Basis-Icon auf der Kachel. 20px ist eine feste Groesse und waechst bewusst nicht mit
der Kachelbreite: Bei einem Zeichen dieser Groesse entscheidet nicht mehr das Verhaeltnis
zum Bild ueber die Lesbarkeit, sondern die absolute Hoehe der zwei Buchstaben.
Was 20px bedeuten, gemessen am gerenderten Zeichen: Das "AI" steht damit 7,7px hoch --
exakt so hoch wie zuvor in der 85px breiten Pille, weil im Kreis kein Wort danebensteht,
das Platz braucht. Die belegte Flaeche faellt dabei von rund 1394px2 auf 400px2.
Das Wort "GENERATED" entfaellt. Measure 1.1 a des Code of Practice verlangt als
Hauptelement nur das grossgeschriebene "AI" und nennt als Beispiel ausdruecklich ein
AI-Icon; das Wort steht in 1.1 b und ist dort empfohlen, nicht verpflichtend. Der Preis
steht in Annex 1: Das Basis-Icon ist dort fuer den Fall gefuehrt, dass eine interaktive
Ebene oder ein eigenes Textlabel danebensteht, und Varianten mit Wort schnitten in den
Nutzertests der Kommission "signifikant besser" ab. Auf der Kachel steht kein solcher
Text -- im Artikel schon, dort bleibt deshalb das Lockup.
aspect-ratio haelt das Zeichen rund (die viewBox ist auf den Kreis beschnitten). */
.swk-ai-figure img.swk-ai-badge--basic {
width: 20px;
aspect-ratio: 1 / 1;
}
/* Die Breite des Lockups steht hier und nicht in der Container-Query weiter unten, obwohl es
nur dort sichtbar wird: Ohne eigene Breite faellt es unter die Kartenstile
(`.swk-archive-card-image img { width: 100% }`) und laege formatfuellend ueber dem Motiv,
sobald es doch einmal erscheint.
Die Breite waechst mit dem Bild (cqw = Prozent der Container-Breite), aber nur zwischen
zwei Anschlaegen: Unten faengt 72px kuenftige, schmalere Faelle ab, oben verhindern 85px,
dass das Label auf dem grossen Beitragsbild (888px) selbst zum Bildelement wird. Ein
breiteres Zeichen waere dort das groesste Element der Seite, ohne dass die zusaetzliche
Breite etwas leserlicher macht: Lesbar ist das Wort bereits bei 85px, wo "GENERATED"
5,7px hoch steht.
aspect-ratio haelt die Hoehe am Zeichen (beschnittene viewBox 1384.24 x 266.41), damit die
Pille nicht verzerrt. Der Wert steht hier statt als width/height-Attribut am Bild, weil die
Breite je Container variiert. */
.swk-ai-figure img.swk-ai-badge--lockup {
width: clamp(72px, 24cqw, 85px);
aspect-ratio: 1384.24 / 266.41;
}
/* Auf grossen Bildern -- Beitragsbild im Artikel, breite Karten -- traegt das Motiv das
Lockup ohne Weiteres, und dort steht unter dem Bild die Zeile "Symbolbild, mit KI
erstellt": genau der Fall, in dem das Wort im Zeichen seinen Nutzen ausspielt. Hier steht
nur, was sich gegenueber der Kachel unterscheidet -- welches Zeichen sichtbar ist und wie
weit es von der Kante abrueckt. Die Groessen stehen oben bei den beiden Zeichen. */
@container (min-width: 480px) {
.swk-ai-figure img.swk-ai-badge {
top: 12px;
right: 12px;
}
.swk-ai-figure img.swk-ai-badge--lockup {
display: block;
}
.swk-ai-figure img.swk-ai-badge--basic {
display: none;
}
}
/* Sehr schmale Kacheln: enger an die Ecke, damit das Label nicht ueber das Motiv wandert.
Diese Breite kommt im aktuellen Layout nicht vor (die schmalste Kachel misst 355px) --
die Regel faengt kuenftige, kleinere Karten ab. */
@container (max-width: 260px) {
.swk-ai-figure img.swk-ai-badge {
top: 7px;
right: 7px;
}
}