@layer basics {
  /* 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;
  }
}