/* =========================================================
   KI-Labels für Bilder, Builder-Wrapper und Hintergrundbilder
   ========================================================= */

:root {
  --ki-label-offset: 10px;
  --ki-label-z-index: 10;

  /* AI */
  --ki-icon-ai-white: url("../icons/label_ai_white.svg");
  --ki-icon-ai-black: url("../icons/label_ai_black.svg");
  --ki-icon-ai-white-transparent: url("../icons/label_ai_white-transparent.svg");
  --ki-icon-ai-black-transparent: url("../icons/label_ai_black-transparent.svg");

  /* AI-GENERATED */
  --ki-icon-generated-white: url("../icons/label_ai-generated_white.svg");
  --ki-icon-generated-black: url("../icons/label_ai-generated_black.svg");
  --ki-icon-generated-white-transparent: url("../icons/label_ai-generated_white-transparent.svg");
  --ki-icon-generated-black-transparent: url("../icons/label_ai-generated_black-transparent.svg");

  /* AI-MODIFIED */
  --ki-icon-modified-white: url("../icons/label_ai-modified_white.svg");
  --ki-icon-modified-black: url("../icons/label_ai-mofified_black.svg");
  --ki-icon-modified-white-transparent: url("../icons/label_ai-modified_white-transparent.svg");
  --ki-icon-modified-black-transparent: url("../icons/label_ai-modified_black-transparent.svg");
}

/* =========================================================
   Basis
   ========================================================= */

.ki-label,
.ki-bg-label {
  position: relative !important;

  /* Standard-Typ: kompaktes AI-Icon */
  --ki-icon-white: var(--ki-icon-ai-white);
  --ki-icon-black: var(--ki-icon-ai-black);
  --ki-icon-white-transparent: var(--ki-icon-ai-white-transparent);
  --ki-icon-black-transparent: var(--ki-icon-ai-black-transparent);

  /* Standardgrößen */
  --ki-label-small-width: 34px;
  --ki-label-small-height: 34px;
  --ki-label-medium-width: 44px;
  --ki-label-medium-height: 44px;
  --ki-label-large-width: 56px;
  --ki-label-large-height: 56px;

  /* Standarddarstellung: weiß, mittel */
  --ki-icon: var(--ki-icon-white);
  --ki-label-width: var(--ki-label-medium-width);
  --ki-label-height: var(--ki-label-medium-height);
}

/* Nur automatisch erzeugte Wrapper verändern das Bild-Layout. */
.ki-label.ki-label-auto {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
  vertical-align: top;
}

.ki-label.ki-label-auto > img,
.ki-label.ki-label-auto > picture,
.ki-label.ki-label-auto > picture > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Das eigentliche Label */
.ki-label::before,
.ki-bg-label::before {
  content: "";
  position: absolute !important;

  top: auto !important;
  right: var(--ki-label-offset) !important;
  bottom: var(--ki-label-offset) !important;
  left: auto !important;

  width: var(--ki-label-width);
  height: var(--ki-label-height);

  background-image: var(--ki-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transform: none;
  z-index: var(--ki-label-z-index);
  pointer-events: none;
}

/* =========================================================
   Automatischer Typ aus der Mediathek
   ========================================================= */

.ki-label[data-ki-auto-status="generated"] {
  --ki-icon-white: var(--ki-icon-generated-white);
  --ki-icon-black: var(--ki-icon-generated-black);
  --ki-icon-white-transparent: var(--ki-icon-generated-white-transparent);
  --ki-icon-black-transparent: var(--ki-icon-generated-black-transparent);

  --ki-label-small-width: 108px;
  --ki-label-small-height: 28px;
  --ki-label-medium-width: 132px;
  --ki-label-medium-height: 34px;
  --ki-label-large-width: 154px;
  --ki-label-large-height: 40px;
}

.ki-label[data-ki-auto-status="modified"] {
  --ki-icon-white: var(--ki-icon-modified-white);
  --ki-icon-black: var(--ki-icon-modified-black);
  --ki-icon-white-transparent: var(--ki-icon-modified-white-transparent);
  --ki-icon-black-transparent: var(--ki-icon-modified-black-transparent);

  --ki-label-small-width: 100px;
  --ki-label-small-height: 28px;
  --ki-label-medium-width: 122px;
  --ki-label-medium-height: 34px;
  --ki-label-large-width: 142px;
  --ki-label-large-height: 40px;
}

/* Automatische Farbe aus der Mediathek */
.ki-label[data-ki-auto-color="white"] {
  --ki-icon: var(--ki-icon-white);
}

.ki-label[data-ki-auto-color="black"] {
  --ki-icon: var(--ki-icon-black);
}

.ki-label[data-ki-auto-color="white-transparent"] {
  --ki-icon: var(--ki-icon-white-transparent);
}

.ki-label[data-ki-auto-color="black-transparent"] {
  --ki-icon: var(--ki-icon-black-transparent);
}

/* Automatische Position aus der Mediathek */
.ki-label[data-ki-auto-position="top-left"]::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label[data-ki-auto-position="top-center"]::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label[data-ki-auto-position="top-right"]::before {
  top: var(--ki-label-offset) !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none;
}

.ki-label[data-ki-auto-position="center-left"]::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: translateY(-50%);
}

.ki-label[data-ki-auto-position="center"]::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.ki-label[data-ki-auto-position="center-right"]::before {
  top: 50% !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%);
}

.ki-label[data-ki-auto-position="bottom-left"]::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label[data-ki-auto-position="bottom-center"]::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label[data-ki-auto-position="bottom-right"]::before {
  top: auto !important;
  right: var(--ki-label-offset) !important;
  bottom: var(--ki-label-offset) !important;
  left: auto !important;
  transform: none;
}

/* =========================================================
   Manueller Typ im Builder
   Überschreibt den Mediathek-Typ.
   ========================================================= */

.ki-label.ki-generated,
.ki-bg-label.ki-generated {
  --ki-icon-white: var(--ki-icon-generated-white);
  --ki-icon-black: var(--ki-icon-generated-black);
  --ki-icon-white-transparent: var(--ki-icon-generated-white-transparent);
  --ki-icon-black-transparent: var(--ki-icon-generated-black-transparent);

  --ki-label-small-width: 108px;
  --ki-label-small-height: 28px;
  --ki-label-medium-width: 132px;
  --ki-label-medium-height: 34px;
  --ki-label-large-width: 154px;
  --ki-label-large-height: 40px;
}

.ki-label.ki-modified,
.ki-bg-label.ki-modified {
  --ki-icon-white: var(--ki-icon-modified-white);
  --ki-icon-black: var(--ki-icon-modified-black);
  --ki-icon-white-transparent: var(--ki-icon-modified-white-transparent);
  --ki-icon-black-transparent: var(--ki-icon-modified-black-transparent);

  --ki-label-small-width: 100px;
  --ki-label-small-height: 28px;
  --ki-label-medium-width: 122px;
  --ki-label-medium-height: 34px;
  --ki-label-large-width: 142px;
  --ki-label-large-height: 40px;
}

/* =========================================================
   Manuelle Farbe im Builder
   Überschreibt die Mediathek-Farbe.
   ========================================================= */

.ki-label.ki-white,
.ki-bg-label.ki-white {
  --ki-icon: var(--ki-icon-white);
}

.ki-label.ki-black,
.ki-bg-label.ki-black {
  --ki-icon: var(--ki-icon-black);
}

.ki-label.ki-transparent,
.ki-bg-label.ki-transparent,
.ki-label.ki-white.ki-transparent,
.ki-bg-label.ki-white.ki-transparent {
  --ki-icon: var(--ki-icon-white-transparent);
}

.ki-label.ki-black.ki-transparent,
.ki-bg-label.ki-black.ki-transparent {
  --ki-icon: var(--ki-icon-black-transparent);
}

/* =========================================================
   Manuelle Position im Builder
   Überschreibt die Mediathek-Position.
   ========================================================= */

.ki-label.ki-top-left::before,
.ki-bg-label.ki-top-left::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label.ki-top-center::before,
.ki-bg-label.ki-top-center::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label.ki-top-right::before,
.ki-bg-label.ki-top-right::before {
  top: var(--ki-label-offset) !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none;
}

.ki-label.ki-center-left::before,
.ki-bg-label.ki-center-left::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: translateY(-50%);
}

.ki-label.ki-center::before,
.ki-bg-label.ki-center::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.ki-label.ki-center-right::before,
.ki-bg-label.ki-center-right::before {
  top: 50% !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%);
}

.ki-label.ki-bottom-left::before,
.ki-bg-label.ki-bottom-left::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label.ki-bottom-center::before,
.ki-bg-label.ki-bottom-center::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label.ki-bottom-right::before,
.ki-bg-label.ki-bottom-right::before {
  top: auto !important;
  right: var(--ki-label-offset) !important;
  bottom: var(--ki-label-offset) !important;
  left: auto !important;
  transform: none;
}

/* =========================================================
   Größen
   ========================================================= */

.ki-label.ki-small,
.ki-bg-label.ki-small {
  --ki-label-width: var(--ki-label-small-width);
  --ki-label-height: var(--ki-label-small-height);
}

.ki-label.ki-large,
.ki-bg-label.ki-large {
  --ki-label-width: var(--ki-label-large-width);
  --ki-label-height: var(--ki-label-large-height);
}

/* =========================================================
   Mobile
   Ohne explizite Größenklasse wird die kleine Variante genutzt.
   ========================================================= */

@media (max-width: 640px) {
  .ki-label,
  .ki-bg-label {
    --ki-label-offset: 8px;
  }

  .ki-label:not(.ki-small):not(.ki-large),
  .ki-bg-label:not(.ki-small):not(.ki-large) {
    --ki-label-width: var(--ki-label-small-width);
    --ki-label-height: var(--ki-label-small-height);
  }
}

/* =========================================================
   KURZDOKU

   Bild/Wrapper:  ki-label
   Hintergrund:    ki-bg-label
   Typ:            ki-generated | ki-modified
   Farbe:          ki-white | ki-black | ki-transparent
   Position:       ki-top-left | ki-top-center | ki-top-right
                   ki-center-left | ki-center | ki-center-right
                   ki-bottom-left | ki-bottom-center | ki-bottom-right
   Größe:          ki-small | ki-large

   Mediathek:      Typ, Farbe und Position werden automatisch gesetzt.
   Builder:        Klassen überschreiben die Mediathek-Werte.
   Beispiel:       class="ki-label ki-modified ki-black ki-top-left"
   ========================================================= */