/** * fresch KI-Marker — Badge. * * Enthält Aufbau und Standardaussehen: dunkles Schild, unten rechts, mit * hellem Symbol. Die Texte und alle Abweichungen davon (andere Position, * helle Grundvariante, Symbol aus, Regeln für Header und Raster) kommen aus * dem dynamisch erzeugten CSS im . * * Die url()-Pfade sind relativ zu dieser Datei und funktionieren deshalb * unabhängig vom Installationsort. * * Bewusst ausschließlich ::after: Divi belegt an den Trenner-Modulen bereits * ::before für die Trennlinie. */ .fwki-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .fwki-wrap > img { max-width: 100%; height: auto; } /* Träger für die Handklassen. */ .ki-bild, .ki-hintergrund { position: relative; } .fwki-wrap[data-fwki]::after, .ki-bild::after, .ki-hintergrund::after { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-block; box-sizing: border-box; max-width: calc(100% - 24px); padding: 4px 10px 4px 27px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.72); background-image: url("eu-icon.svg"); background-repeat: no-repeat; background-position: 8px center; background-size: 13px 13px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; font-style: normal; line-height: 1.4; letter-spacing: 0.01em; text-align: left; text-decoration: none; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* Der Text der Bild-Badges steckt am Wrapper, nicht im Stylesheet. */ .fwki-wrap[data-fwki]::after { content: attr(data-fwki-label); } /* Helle Variante, für dunkle oder abgedunkelte Bilder. */ .ki-hell::after, .fwki-wrap.ki-hell[data-fwki]::after { background-color: rgba(255, 255, 255, 0.92); background-image: url("eu-icon-dark.svg"); color: #1d2327; } /* Auf schmalen Bildschirmen etwas kompakter. */ @media (max-width: 480px) { .fwki-wrap[data-fwki]::after, .ki-bild::after, .ki-hintergrund::after { right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px 3px 24px; background-position: 6px center; background-size: 12px 12px; font-size: 11px; } } @media print { .fwki-wrap[data-fwki]::after, .ki-bild::after, .ki-hintergrund::after { background-color: #000; color: #fff; } }