/* -----------------------------------------------------------------------------
 * Hinweis "Bild: KI-generiert" (EU-KI-VO Art. 50)
 *
 * Der ViewHelper erzeugt den Hinweis fuer jedes markierte Bild. Sichtbar ist er
 * nur in den Komponenten, deren Darstellung geprueft wurde - daher die
 * Grundregel "display: none" und die Freischaltung je Kontext weiter unten.
 * Eine weitere Komponente freizuschalten heisst: Selektor ergaenzen und die
 * Position (unten rechts / oben links) waehlen.
 * -------------------------------------------------------------------------- */

.ai-note {
    display: none;
}

/* -----------------------------------------------------------------------------
 * Positionsrahmen
 *
 * Bezugspunkt ist die <figure>, NICHT das <picture>. <picture> ist ein
 * Inline-Element: sein Kasten umschliesst das Bild nicht, sondern ist nur so
 * hoch wie eine Textzeile und liegt - weil Bootstrap img { vertical-align:
 * middle } setzt - auf Hoehe der Bildmitte. Ein position:relative am <picture>
 * verankert den Hinweis daher vertikal mittig im Bild statt an dessen Rand.
 *
 * Die <figure> umschliesst das Bild dagegen exakt: .figure ist inline-block
 * (Bootstrap) und schrumpft damit auf die Bildbreite; die Zeilenhoehe wird von
 * dem hohen Bild bestimmt, ein Unterlaengen-Spalt entsteht nicht.
 *
 * .module--media .figure ist im Theme bereits position:relative - hier daher
 * nur die Kontexte, in denen das fehlt. Beim Freischalten einer weiteren
 * Komponente pruefen, ob deren .figure positioniert ist.
 * -------------------------------------------------------------------------- */

.module--partner .module-media .figure {
    position: relative;
}

/* -----------------------------------------------------------------------------
 * Freigeschaltete Kontexte
 * -------------------------------------------------------------------------- */

/* Mitarbeiterliste (Plugin rtsdb_employeelist) */
.module--partner .module-media .figure .ai-note,
/* Standortfilter: Ergebnisliste (Mitarbeiter- und Standortbilder) */
.officeFilterResults .module--media .figure .ai-note,
/* Slider: Einzelbild/Hero */
.module--hero .module--media .figure .ai-note,
/* Slider: Swiper-Slides */
.swiper-slide .module--media .figure .ai-note,
/* News-Detail: Autorenbild */
.module--widget.news-widget.author .module--media .figure .ai-note {
    display: block;
    position: absolute;
    z-index: 3; /* ueber :before-Overlay (z-index 2) und :after-Maske */
    max-width: 100%;
    padding: 0.25em 0.6em;
    background: rgba(0, 15, 27, 0.45);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* verlinkte Bilder bleiben vollflaechig klickbar */
}

/* Standardposition der kleinen Bilder (Karten, Portraits): unten links */
.module--partner .module-media .figure .ai-note,
.officeFilterResults .module--media .figure .ai-note,
.module--widget.news-widget.author .module--media .figure .ai-note {
    left: 0;
    bottom: 0;
}

/* Slider: oben links - unten rechts liegt die weisse Wellenmaske */
.module--hero .module--media .figure .ai-note,
.swiper-slide .module--media .figure .ai-note {
    left: 0;
    top: 0;
}

@media (max-width: 575px) {
    .ai-note {
        font-size: 11px;
        padding: 0.2em 0.5em;
    }
}