/** * KI-Bilder-Kennzeichnung - Frontend. * * Bewusst minimal: der Wrapper bekommt Positionierung, sonst nichts. Es gibt * KEINE Regel auf das selbst - sonst wuerde das Modul in Themes mit * eigenen Bildregeln (feste Hoehen, object-fit, Aspect-Ratio-Boxen) das Layout * verschieben. Das ist auf ueber 100 Websites das groessere Risiko als ein * Badge, das in einem Sonderfall ein paar Pixel danebensitzt. */ .wpwki-ai-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; font-size: 0; vertical-align: top; } /* Vom JS gesetzt, wenn ein bereits vorhandener Container als Anker dient (figure, Elementor-Widget, Section mit Hintergrundbild). */ .wpwki-ai-host { position: relative; } /** * Helle, halbtransparente Pille mit dunkler Schrift - liest sich wie ein * Bildnachweis statt wie ein aufgeklebter Warnhinweis. * * Zur Deckkraft von 60 %: das ist der Punkt, an dem das Label auf einem * Foto zurueckhaltend wirkt und trotzdem sicher lesbar bleibt. Nachgerechnet * fuer die Schriftfarbe #2a2a2a auf 60 % Weiss: Kontrast 12,9 ueber hellem * und 6,3 ueber dunklem Bildbereich. WCAG verlangt 4,5 - beides liegt klar * darueber, und die Barrierefreiheit ist bei Art. 50 KI-VO ausdruecklich * Teil der Pflicht. Weiter herunterdrehen sollte man das nicht. */ .wpwki-ai-badge { position: absolute; z-index: 5; display: inline-block; box-sizing: border-box; margin: 0; padding: 3px 8px; border: 0; /* Der Wert kommt aus den Einstellungen; der Fallback ist die runde Kapsel. */ border-radius: var(--wpwki-ai-radius, 999px); background: rgba(255, 255, 255, 0.6); color: #2a2a2a; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .wpwki-ai-badge:hover, .wpwki-ai-badge:focus-visible { background: rgba(255, 255, 255, 0.92); color: #111; } .wpwki-ai-badge:focus-visible { outline: 2px solid #111; outline-offset: 2px; } /* Groessen */ .wpwki-ai-badge--small { font-size: 10px; padding: 3px 8px; } .wpwki-ai-badge--medium { font-size: 12px; padding: 4px 10px; } .wpwki-ai-badge--large { font-size: 14px; padding: 5px 12px; } /** * Kleine Bilder: das JS setzt diese Klasse, sobald der Anker schmaler als * 400 px ist. Auf einem 271 px breiten Content-Bild nimmt das normale Label * sonst rund ein Viertel der Bildbreite ein. */ .wpwki-ai-badge--compact { font-size: 9px; padding: 2px 6px; letter-spacing: 0.02em; } /* ------------------------------------------------------------------------- * Darstellungsstile. Die Klasse sitzt am , gilt also fuer die ganze * Website - einstellbar unter Einstellungen > wp Widerruf - KI. * ---------------------------------------------------------------------- */ /* "dunkel": dunkle Kapsel, weisse Schrift. Fuer Websites mit ueberwiegend hellen Bildern oft ruhiger als die helle Variante. */ .wpwki-ai-style-dunkel .wpwki-ai-badge { background: rgba(20, 20, 20, 0.6); color: #fff; box-shadow: none; } .wpwki-ai-style-dunkel .wpwki-ai-badge:hover, .wpwki-ai-style-dunkel .wpwki-ai-badge:focus-visible { background: rgba(20, 20, 20, 0.9); color: #fff; } .wpwki-ai-style-dunkel .wpwki-ai-badge:focus-visible { outline-color: #fff; } /* "kurz": gleiche helle Kapsel, im Bild steht nur "KI". Etwas runder, damit das kurze Wort nicht gequetscht wirkt. */ .wpwki-ai-style-kurz .wpwki-ai-badge { padding: 3px 9px; letter-spacing: 0.06em; font-weight: 600; } .wpwki-ai-style-kurz .wpwki-ai-badge--compact { padding: 2px 7px; } /** * "unten": Hinweis als graue Zeile unter dem Bild, rechtsbuendig. Das Foto * bleibt vollstaendig unangetastet. * * Gilt bewusst NICHT fuer Labels mit --overlay. Die sitzen auf * CSS-Hintergrundbildern (Hero, Sections), und dort gibt es kein "unter dem * Bild" - eine statisch eingefuegte Zeile landete irgendwo im Sectioninhalt. * Diese Faelle behalten die helle Kapsel. */ .wpwki-ai-style-unten .wpwki-ai-badge:not(.wpwki-ai-badge--overlay) { position: static; display: block; width: 100%; margin: 0; padding: 4px 2px 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #6b6b6b; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.4; text-align: right; } .wpwki-ai-style-unten .wpwki-ai-badge:not(.wpwki-ai-badge--overlay):hover, .wpwki-ai-style-unten .wpwki-ai-badge:not(.wpwki-ai-badge--overlay):focus-visible { background: none; color: #222; text-decoration: underline; } .wpwki-ai-style-unten .wpwki-ai-badge:not(.wpwki-ai-badge--overlay):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Der Wrapper ist sonst auf line-height 0 gesetzt, damit unter dem Bild kein Leerraum entsteht. Fuer die Textzeile muss er wieder normal fliessen. */ .wpwki-ai-style-unten .wpwki-ai-wrap { line-height: normal; font-size: medium; } /* Positionen */ .wpwki-ai-badge--bottom-right { bottom: 8px; right: 8px; top: auto; left: auto; } .wpwki-ai-badge--bottom-left { bottom: 8px; left: 8px; top: auto; right: auto; } .wpwki-ai-badge--top-right { top: 8px; right: 8px; bottom: auto; left: auto; } .wpwki-ai-badge--top-left { top: 8px; left: 8px; bottom: auto; right: auto; } /* Auf schmalen Viewports nur naeher an die Bildkante ruecken. Die Schriftgroesse regelt --compact, und zwar anhand der tatsaechlichen Bildbreite statt anhand der Viewport-Breite - ein kleines Bild auf einem grossen Bildschirm braucht die Verkleinerung genauso. */ @media (max-width: 480px) { .wpwki-ai-badge--bottom-right, .wpwki-ai-badge--bottom-left { bottom: 5px; } .wpwki-ai-badge--top-right, .wpwki-ai-badge--top-left { top: 5px; } .wpwki-ai-badge--bottom-right, .wpwki-ai-badge--top-right { right: 5px; } .wpwki-ai-badge--bottom-left, .wpwki-ai-badge--top-left { left: 5px; } } /* Im Druck bleibt die Kennzeichnung sichtbar - sie ist Teil der Offenlegungspflicht, nicht Dekoration. */ @media print { .wpwki-ai-badge { background: #fff; color: #111; border: 1px solid #999; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }