/* KI-Kennzeichen über Bildern (EU AI Act) — gesetzt von ai-kennzeichen.js.
 *
 * Größen und Abstände wie bei EB/FFR/TW (index.css dort) und wie in
 * AiImageBadge beim Einbrennen: Auf der Seite und beim Teilen soll dasselbe
 * Zeichen in derselben Größe stehen.
 *
 * Die Hülle liegt deckungsgleich über dem Bild und ist selbst der Container:
 * Ihre Breite IST die gerenderte Bildbreite, danach richten sich die
 * Container-Queries. Eigenes Stylesheet statt input.css, damit kein
 * Tailwind-Build nötig ist. */
.ai-kennzeichen-huelle {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  container-type: inline-size;
}

.ai-kennzeichen-huelle--voll {
  inset: 0;
}

.ai-kennzeichen {
  display: block;
  width: clamp(32px, 2.5cqw, 56px);
  height: auto;
  margin-right: clamp(6px, 0.5cqw, 11px);
  margin-bottom: clamp(6px, 0.5cqw, 11px);
  user-select: none;
  /* Heller Saum, damit der dunkle Button auf dunklem Motiv nicht
   * verschwindet. drop-shadow folgt der Transparenz, umschließt also den
   * Kreis und nicht seinen Kasten. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
}

@container (max-width: 240px) {
  .ai-kennzeichen {
    width: 16px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
}

/* Sehr kleine Bilder (Avatare): Lesbar ist das Zeichen dort ohnehin nicht —
 * den Hinweis tragen alt und title. */
@container (max-width: 96px) {
  .ai-kennzeichen {
    width: 14px;
    margin-right: 2px;
    margin-bottom: 2px;
  }
}