/** * KI-Label Frontend-Styles (F9/F14). * Wird nur geladen, wenn ein Label-Modus ODER der Chatbot-Hinweis aktiv ist (F11). * Das -Tag selbst wird vom Plugin nie veraendert. */ /* Wrapper um Bilder aus wp_get_attachment_image (Featured Images etc.). */ .clarivo-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; } /* Div-Variante (Fallback-Wrapper um
, das nicht in darf): enthaelt Text (figcaption), daher normale Zeilenhoehe. */ div.clarivo-wrap { line-height: normal; } /* Bild-Block (
) bekommt nur diese Klasse als Anker fuer das Badge. */ .clarivo-figure { position: relative; } /* Finding #1 (Launch-Test 2026-06-28): Der Overlay-Badge ankert absolut an dieser Figure. Ohne Breitenbegrenzung ist die Block-Bild-Figure volle Inhaltsbreite, waehrend das BILD schmaler sein kann (kleines Bild, nicht spaltenfuellend) – der Eck-Badge sitzt dann an der FIGURE-, nicht an der BILD-Ecke und schwebt im Leerraum (auf zentrierenden Themes schon in der Default-Position). `fit-content` laesst die Figure das Bild umschliessen – exakt wie es der Featured-Image-Wrapper `.clarivo-wrap` via inline-block schon tut – sodass der Badge am Bild klebt. Vollbild-Bilder fuellen die Spalte ohnehin (fit-content = verfuegbare Breite) und bleiben unveraendert. ENG gescoped auf `wp-block-image`, damit es NICHT trifft: - Video-Figuren (`wp-block-video`): ein width:100%-Player kollabierte in einem shrink-wrappenden Container (vgl. div.clarivo-audio-wrap unten). - den WC-`
`-Wrapper (kein
; traegt in Pro die Galerie-Optik). - Classic-`` (laeuft bereits ueber das inline-block-`.clarivo-wrap`). align(full|wide) bewusst ausgenommen (sollen breiter als der Inhalt sein). `.aligncenter` matcht hingegen BEWUSST und schrumpft mit: seine margin:auto zentriert dann die auf Bildbreite geschrumpfte Figure -> Badge klebt am Bild UND das Bild bleibt zentriert (gewollt). Ehrliche Grenze (Reviewer N3): Traegt das Bild im Overlay-Modus eine eigene figcaption, die BREITER als das Bild ist, bestimmt die Caption die fit-content-Breite -> der Badge kann dann erneut neben dem Bild sitzen. Schmaler Randfall (Overlay + lange Unterschrift); ein echter Anker am waere ein groesserer Umbau und ist hier nicht Teil des Fixes. */ figure.clarivo-figure.wp-block-image:not(.alignfull):not(.alignwide) { width: -moz-fit-content; width: fit-content; max-width: 100%; } /* Overlay-Badge */ .clarivo-overlay-badge { position: absolute; z-index: 2; /* Ueberlaufschutz kleine Bilder (CoP-Fix2): der Badge darf nie breiter als das Bild minus der 8px-Eckabstaende werden. box-sizing rechnet das Padding in die 100% ein. Damit der nowrap-Inhalt (groesseres EU-Icon + Text) bei Platzmangel trotzdem nicht ueber den Bildrand laeuft, ist der Badge ein Flex-Container: das Icon (flex:0 1 auto, object-fit:contain in der .clarivo-icon-Regel) gibt als Erstes proportional nach, der Text bleibt lesbar. Auf grossen Bildern hat alles Platz -> 34px-Icon bleibt voll. Text-Preset (kein ): genau EIN anonymes Flex-Item, rendert identisch zur frueheren inline-block-Zeile (real gegengeprueft). */ display: flex; align-items: center; max-width: calc(100% - 16px); box-sizing: border-box; padding: 2px 8px; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; text-decoration: none; text-transform: none; } .clarivo-style-dark { background: rgba(0, 0, 0, 0.65); color: #fff; } .clarivo-style-light { background: rgba(255, 255, 255, 0.85); color: #1d2327; } .clarivo-pos-top-left { top: 8px; left: 8px; } .clarivo-pos-top-right { top: 8px; right: 8px; } .clarivo-pos-bottom-left { bottom: 8px; left: 8px; } .clarivo-pos-bottom-right { bottom: 8px; right: 8px; } /* F21: Wrapper um den [audio]-Shortcode-Player – Block statt inline-block, weil der Player (width:100%) in einem shrink-wrappenden Container kollabieren wuerde. position:relative erbt der Wrapper von .clarivo-wrap, sodass ein Overlay-Badge (Block E: audio_mode='overlay') an der Player-Ecke sitzt. Das ist die optisch gedraengte, laut G1 2026-06-17 aber erlaubte Audio-Overlay-Variante – die schmale Player-Leiste bietet wenig Flaeche, der Nutzer waehlt sie bewusst (sonst Hinweis-Zeile/Caption). */ div.clarivo-audio-wrap { display: block; } /* F21: Video-Overlay-Badge – gleiche Optik/Positionen wie das Bild-Badge, aber DAUERHAFT sichtbar am Player (CoP-Empfehlung Video: kein Auto-Hide). Bottom-Positionen ruecken ueber die Steuerleiste des Players (~40-48px bei den gaengigen Browsern/MediaElement), damit das Badge die Controls weder verdeckt noch beim Einblenden von ihnen ueberlagert wird. */ .clarivo-video-badge.clarivo-pos-bottom-left, .clarivo-video-badge.clarivo-pos-bottom-right { bottom: 56px; } /* N4 (Review S5.5-C): Video-Block MIT eigener Bildunterschrift – die figcaption verlaengert die figure nach unten, der bottom-Anker des Badges muss zusaetzlich die Caption-Hoehe ueberbruecken, sonst landet das Badge auf der Steuerleiste. Wert-Herleitung: Core gibt der Video-figcaption margin-top .5em + margin-bottom 1em; mit gaengigen Theme-Captions (13-14px, line-height ~1.4-1.5) ergibt eine EINZEILIGE Unterschrift ~38-44px -> 100px stellt das Badge wieder ~56px ueber die Video-Unterkante. Ehrliche Grenze: bei mehrzeiligen Unterschriften sitzt das Badge entsprechend tiefer (CSS kann die reale Caption-Hoehe nicht messen); die top-Positionen sind von der figcaption nie betroffen. */ .clarivo-has-figcaption .clarivo-video-badge.clarivo-pos-bottom-left, .clarivo-has-figcaption .clarivo-video-badge.clarivo-pos-bottom-right { bottom: 100px; } /* --------------------------------------------------------------------------- * CoP-EU-Icons (G1 2026-06-19; Block E 2026-06-17): offizielles * EU-Kennzeichnungs-Icon – bei „nur Logo" allein, bei „Text + Logo" NEBEN dem * Label-Text (pro-Typ-Inhalt). Eingebettet als * innerhalb des Badge-/Caption-Spans – das Icon erbt daher Positionierung und * z-index des Badges, braucht keine eigenen. * * GROESSE – Herleitung (Sprint-CoP-Fix2 2026-06-17, real auf dev.local im * Headless-Chrome-Groessenvergleich gemessen, nicht geraten – Belege: * docs/screenshots/cop-icon-fix/VERGLEICH_groessen.png + VERGLEICH_zoom_3038.png): * Die drei Icons teilen dieselbe viewBox-HOEHE (566.93), nur die Breite * variiert – ai-basic ist quadratisch (1:1), ai-generated ~3.16:1, * ai-modified ~3.0:1. Eine gemeinsame gerenderte HOEHE haelt sie * maßstabskonsistent. * * Warum FESTE 34px (Fix2) statt 22px (Fix1): Die breiten Label-Icons tragen * den Text „AI GENERATED"/„AI MODIFIED" eingebaut. Bei 22px Icon-Hoehe ist * diese eingebettete Schrift nur ~6-8px hoch und damit unscharf/unlesbar * (Chris-Befund Fix-Runde 2, im Video-Overlay-Beleg sichtbar). Der * Groessenvergleich (22/30/38/46px) zeigt einen klaren Lesbarkeits-Sprung * zwischen 22 und 30px; der Schaerfe-Zoom (30/34/38px) zeigt: bei 30px ist * „GENERATED"/„MODIFIED" lesbar, aber die Buchstaben sind noch gedraengt/duenn, * bei 34px haben sie „Luft" und sind eindeutig scharf, bei 38px wuerde der * Badge unnoetig dominieren. 34px ist damit die KLEINSTE Hoehe mit klar * lesbarer Beschriftung. Bei 3.16:1 ergibt das ~107px Icon-Breite – passt mit * dem Innenabstand in einen Eck-Badge ueber gaengig grossen Bildern; der * Ueberlaufschutz unten faengt sehr kleine Bilder ab. * * Warum !important auf height + width: Block-Themes laden ihr Bild-CSS NACH * diesem Stylesheet. Twenty Twenty-Five setzt `.wp-block-image img { height: * auto; max-width:100% }` – gleiche Spezifitaet, spaeter im Cascade => es * GEWINNT. Real gemessen: ohne !important rendert das figure-Icon mit * height:62.875px (das quadratische ai-basic blaeht sich dann auf * Badge-Breite ~63px auf und wirkt riesig). `!important` + erhoehte * Spezifitaet sichern die Hoehe themeunabhaengig. width:auto erhaelt das * Seitenverhaeltnis (NIE verzerren). * * Ueberlaufschutz kleine Bilder (Fix2 – real auf dev.local mit 360/150/110/90px- * Kontexten geprueft, Beleg VERGLEICH_real_dark_und_klein.png): Mit dem * groesseren 34px-Icon wird ein ~107px breiter Eck-Badge auf einem kleinen * Thumbnail (z. B. 110px) breiter als das Bild. Ein blosses `max-width` am * Badge reicht NICHT (der nowrap-Inhalt mit fester Icon-Hoehe laeuft trotzdem * ueber). Loesung: Der Overlay-Badge ist ein FLEX-Container (Regel oben) und * das Icon gibt mit `flex: 0 1 auto` + `min-width: 0` als Erstes nach; bei * Platzmangel schrumpft NUR das Icon, der Text bleibt lesbar. `object-fit: * contain` haelt dabei das Seitenverhaeltnis (KEINE Verzerrung), obwohl die * Hoehe per !important auf 34px steht – contain skaliert das Bild innerhalb der * Flex-zugewiesenen Breite proportional. Auf grossen Bildern (genug Platz) * bleibt das Icon voll bei 34px. Sehr kleine Bilder (<~120px) zeigen das Icon * dann nur noch klein/angedeutet – die Kennzeichnung traegt dort der sichtbare * Text. Das ist die ehrliche physikalische Grenze: ein 107px-Label passt nicht * neben Text in einen 90px-Eck-Badge; Ueberlauf waere die schlechtere Option. * * ai-basic-Modifier (27px): Das quadratische Basis-Icon ist eine VOLLE * Kreisscheibe (white-Variante = gefuellter weisser Kreis) – bei gleicher * Hoehe wie die duennen Label-Icons wirkt es optisch „schwerer" (mehr * Tintenflaeche). ~0,8-Faktor (34 -> 27px) gleicht dieses Gewicht zur * Label-Linie aus (optisch im Vergleich bestaetigt). Per Attributselektor auf * den Dateinamen targetiert – kein Markup-Eingriff noetig (reiner CSS-Fix). * * Vertikale Ausrichtung: Der Flex-Badge zentriert Icon und Text ueber * align-items:center; vertical-align:middle bleibt als Fallback fuer die * Caption-Pfade (dort sitzt das Icon weiterhin inline, kein Flex). Der rechte * margin trennt Icon vom Text (Icon+Label-Kombination). * ------------------------------------------------------------------------- */ .clarivo-overlay-badge .clarivo-icon, .clarivo-caption .clarivo-icon, .clarivo-caption-inline .clarivo-icon, .clarivo-icon { display: inline-block; height: 34px !important; width: auto !important; max-width: 100% !important; /* Ueberlaufschutz (Fix2): im Flex-Badge gibt das Icon zuerst nach; contain haelt das Seitenverhaeltnis beim Schrumpfen. Auf Nicht-Flex-Kontexten (Caption) sind die Flex-Eigenschaften wirkungslos. */ flex: 0 1 auto; min-width: 0; object-fit: contain; margin: 0 0.4em 0 0; vertical-align: middle; border: 0; box-shadow: none; } /* ai-basic-Modifier: quadratisches Basis-Icon etwas kleiner (Gewichtsausgleich gegen die VOLLE Kreisscheibe, ~0,8-Faktor). Per Dateiname-Selektor – ai-basic-white.svg / ai-basic-black.svg / -transparent-Varianten. Die Hoehe hier (27px) ist der medium-Fallback; die Groessenklassen unten setzen den konkreten Wert je Stufe. */ .clarivo-overlay-badge .clarivo-icon[src*="ai-basic"], .clarivo-caption .clarivo-icon[src*="ai-basic"], .clarivo-caption-inline .clarivo-icon[src*="ai-basic"], .clarivo-icon[src*="ai-basic"] { height: 27px !important; } /* --------------------------------------------------------------------------- * CoP-Erweiterung Block E (G1 2026-06-17): drei Logo-Groessen pro Medientyp. * Der Renderer haengt an jedes Icon eine Stufenklasse * (clarivo-icon-size-small|medium|large). Die breiten Label-Icons (ai-generated/ * ai-modified) nutzen 22 / 34 / 46px; medium=34px ist der bisherige, in den * Fix-Runden als „kleinste klar lesbare Hoehe" bestaetigte Default (eingebaute * Schrift „AI GENERATED"/„AI MODIFIED" scharf). small=22px ist kompakt (Schrift * kleiner, aber bei grossen Bildern noch erkennbar – die ehrliche Grenze auf * Thumbnails traegt ohnehin der Ueberlaufschutz/Text). large=46px fuer * praesente Kennzeichnung. Das quadratische ai-basic folgt dem ~0,8-Faktor * (18 / 27 / 37px), damit die volle Kreisscheibe nicht optisch schwerer wirkt * als die duennen Label-Icons. !important + Spezifitaet wie bei der Basisregel * (Block-Theme-img-CSS laedt spaeter im Cascade). width:auto erhaelt das * Seitenverhaeltnis; der Flex-Ueberlaufschutz der Basisregel gilt weiter. * ------------------------------------------------------------------------- */ .clarivo-overlay-badge .clarivo-icon.clarivo-icon-size-small, .clarivo-caption .clarivo-icon.clarivo-icon-size-small, .clarivo-caption-inline .clarivo-icon.clarivo-icon-size-small, .clarivo-icon.clarivo-icon-size-small { height: 22px !important; } .clarivo-overlay-badge .clarivo-icon.clarivo-icon-size-medium, .clarivo-caption .clarivo-icon.clarivo-icon-size-medium, .clarivo-caption-inline .clarivo-icon.clarivo-icon-size-medium, .clarivo-icon.clarivo-icon-size-medium { height: 34px !important; } .clarivo-overlay-badge .clarivo-icon.clarivo-icon-size-large, .clarivo-caption .clarivo-icon.clarivo-icon-size-large, .clarivo-caption-inline .clarivo-icon.clarivo-icon-size-large, .clarivo-icon.clarivo-icon-size-large { height: 46px !important; } /* ai-basic je Stufe (~0,8-Faktor; Selektor mit Dateiname + Stufenklasse). */ .clarivo-overlay-badge .clarivo-icon[src*="ai-basic"].clarivo-icon-size-small, .clarivo-caption .clarivo-icon[src*="ai-basic"].clarivo-icon-size-small, .clarivo-caption-inline .clarivo-icon[src*="ai-basic"].clarivo-icon-size-small, .clarivo-icon[src*="ai-basic"].clarivo-icon-size-small { height: 18px !important; } .clarivo-overlay-badge .clarivo-icon[src*="ai-basic"].clarivo-icon-size-medium, .clarivo-caption .clarivo-icon[src*="ai-basic"].clarivo-icon-size-medium, .clarivo-caption-inline .clarivo-icon[src*="ai-basic"].clarivo-icon-size-medium, .clarivo-icon[src*="ai-basic"].clarivo-icon-size-medium { height: 27px !important; } .clarivo-overlay-badge .clarivo-icon[src*="ai-basic"].clarivo-icon-size-large, .clarivo-caption .clarivo-icon[src*="ai-basic"].clarivo-icon-size-large, .clarivo-caption-inline .clarivo-icon[src*="ai-basic"].clarivo-icon-size-large, .clarivo-icon[src*="ai-basic"].clarivo-icon-size-large { height: 37px !important; } /* Caption-Modus: eigene Hinweiszeile unter dem Bild */ .clarivo-caption { display: block; font-size: 0.8em; line-height: 1.5; margin-top: 4px; opacity: 0.75; } /* Caption-Modus: Zusatz in einer vorhandenen Bildunterschrift */ .clarivo-caption-inline { opacity: 0.85; } /* --------------------------------------------------------------------------- * F14: Chatbot-Hinweis – kleines, fixes Banner in einer unteren Ecke. * * z-index 999999: ueber Theme-Headern/Stickybars und ueber den Containern * der meisten Chat-Widgets. Einige Widgets (z. B. Tidio, Crisp) nutzen * eigene z-index-Werte bis ~1000000+ und koennten das Banner ueberdecken – * deshalb sitzt das Banner per Default mit 96px Abstand OBERHALB der * typischen Launcher-Buttons (ca. 56–64px Hoehe + 16–24px Rand), sodass * es auch ohne z-index-Sieg sichtbar bleibt. * * Kontrast (NF6): Banner-Hintergruende sind bewusst deckender als die * Bild-Badges (das Banner liegt ueber beliebigem Seiteninhalt) – * dark: weiss auf ~87% Schwarz, light: #1d2327 auf ~97% Weiss mit Rahmen. * ------------------------------------------------------------------------- */ .clarivo-chatbot-note { position: fixed; z-index: 999999; max-width: calc(100vw - 32px); padding: 6px 12px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); pointer-events: none; text-decoration: none; text-transform: none; } .clarivo-chatbot-note.clarivo-style-dark { background: rgba(0, 0, 0, 0.87); color: #fff; } .clarivo-chatbot-note.clarivo-style-light { background: rgba(255, 255, 255, 0.97); color: #1d2327; border: 1px solid #c3c4c7; } .clarivo-chatbot-pos-bottom-right { right: 16px; bottom: 96px; } .clarivo-chatbot-pos-bottom-left { left: 16px; bottom: 96px; } /* --------------------------------------------------------------------------- * F19: KI-Texthinweis – Hinweis am Beitragsanfang/-ende bzw. als * Gutenberg-Block "KI-Hinweis (Clarivo)" im Inhalt. Reiner Text in einem *
; ohne dieses CSS bleibt der Hinweis als normaler * Textabsatz lesbar (graceful degradation). * * B1 (Sprint 4): bewusst dezenter Free-Default nach Vorbild des * Bild-Badges – kleine Schrift (0.8em), schmale Zeile, KEINE * Vollbreite-Blockwirkung: display:inline-block laesst das
nur die * Breite seines Textes einnehmen (es steht als Block-Kind trotzdem auf * einer eigenen Zeile). Feinjustierung (Schrift, Farben, eigenes CSS) * bleibt der Pro-Version vorbehalten (P11). * * Kontrast (NF6, gedaempft heisst nicht unleserlich): dark erbt die * Badge-Optik aus .clarivo-style-dark (Weiss auf 65% Schwarz, auf weissem * Grund effektiv ~#595959 -> ca. 7:1); light = #50575e auf #f6f7f7 mit * feiner Linie (ca. 6.5:1, ueber dem 4.5:1-Minimum fuer Fliesstext). * ------------------------------------------------------------------------- */ /* Aeusserer Wrapper: normales Block-Element, damit constrained Layouts (Block-Themes) ihn wie einen Absatz zentrieren und auf Inhaltsbreite begrenzen (Finding 2026-06-12: ein inline-block-Element klebte am linken Rand des Vollbreite-Containers, weil margin:auto nur Block-Boxen zentriert). Negativer Top-Margin (Finding Chris 2026-06-30 „grosser Abstand zwischen Titel und Markierung"): Der Hinweis ist das ERSTE Element im Inhalts- bzw. Auszug-Container, und viele Themes setzen dort einen grossen Abstand zum Beitrags-Header – GeneratePress z. B. .entry-content/.entry-summary :not(:first-child){margin-top:2em}. Dieser Container-Margin und der Top-Margin des Hinweises KOLLABIEREN (Parent / erstes Kind), d. h. ein positiver Wert des Hinweises verschwindet komplett im groesseren Theme-Margin und Aenderungen daran bleiben wirkungslos. Ein NEGATIVER Wert senkt den zusammengefassten Margin dagegen ab (2em + (-1.5em) = 0.5em) und rueckt den Hinweis dicht unter Titel/Meta – theme-uebergreifend, weil er den jeweiligen Container-Abstand reduziert statt mit festen Pixeln zu arbeiten. Greift in Einzelbeitrag UND Archiv (gleiche Theme-Regel fuer beide). */ .clarivo-text-note { margin: -1.5em auto 0.75em; } /* Innerer Badge: kompakte Optik exakt nach Bild-Badge-Vorbild (11px). */ .clarivo-text-note-badge { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; } /* Dunkel: erbt .clarivo-style-dark (rgba(0,0,0,0.65) + #fff) = Badge-Look. */ .clarivo-text-note-badge.clarivo-style-light { background: #f6f7f7; border: 1px solid #c3c4c7; color: #50575e; }