/* KI-Hinweis-Overlay auf Bootstrap-Package-Bildern (siehe Media/AiNotice.html). */
.jr-ai-notice {
  --jr-ai-notice-bg: rgba(255, 255, 255, 0.6);
  --jr-ai-notice-color: #000;
  --jr-ai-notice-gutter: 0.5rem;
  --jr-ai-notice-top: var(--jr-ai-notice-gutter);
  --jr-ai-notice-bottom: auto;
  --jr-ai-notice-radius: 0.25rem;

  position: absolute;
  z-index: 1000;
  top: var(--jr-ai-notice-top);
  right: var(--jr-ai-notice-gutter);
  bottom: var(--jr-ai-notice-bottom);

  max-width: calc(100% - 2 * var(--jr-ai-notice-gutter));
  padding: 0.25rem var(--jr-ai-notice-gutter);
  border-radius: var(--jr-ai-notice-radius);

  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--jr-ai-notice-color);

  background-color: var(--jr-ai-notice-bg);
}

/* Unterhalb 1550px ueberlappen Content-Elemente die Bildunterkante, deshalb
   sitzt der Hinweis dort oben rechts. Ab 1550px zurueck in die untere Ecke. */
@media (min-width: 1550px) {
  .jr-ai-notice {
    --jr-ai-notice-top: auto;
    --jr-ai-notice-bottom: var(--jr-ai-notice-gutter);
  }
}

figure.image {
  position: relative;
}