/* ==========================================================================
   TI Image Credits: Liste der Bildnachweise
   Strikt auf .ti-image-credits gescoped. Keine Eingriffe in Elementor-Container.
   Breakpoints entsprechen den Elementor-Defaults (Tablet 1024px, Mobile 767px).
   ========================================================================== */

.ti-image-credits {
  --ti-image-credits-max-height: 500px;
  --ti-image-credits-gap: 0.9375rem;
  --ti-image-credits-thumb-width: 40px;
  --ti-image-credits-thumb-height: 29px;
  --ti-image-credits-font-size: 1.25rem;
  --ti-image-credits-muted: rgba(16, 32, 58, 0.65);
  --ti-image-credits-placeholder: #d9d9d9;
  --ti-image-credits-error: #b00020;

  display: block;
  width: 100%;
  max-height: var(--ti-image-credits-max-height);
  padding: 0.25rem 0.5rem 0.25rem 0.25rem; /* Platz für Fokusring und Scrollbar */
  overflow-x: hidden;
  overflow-y: auto;
  color: inherit;
  scrollbar-width: thin;
}

.ti-image-credits *,
.ti-image-credits *::before,
.ti-image-credits *::after {
  box-sizing: border-box;
}

/* Fokusring des Scrollbereichs (nur gesetzt, wenn er überläuft). */
.ti-image-credits:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* ---------- Status ---------- */

.ti-image-credits__status {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.ti-image-credits__status:empty {
  display: none;
}

.ti-image-credits[data-ti-image-credits-state="loading"]
  .ti-image-credits__status,
.ti-image-credits[data-ti-image-credits-state="empty"]
  .ti-image-credits__status {
  color: var(--ti-image-credits-muted);
}

.ti-image-credits[data-ti-image-credits-state="error"]
  .ti-image-credits__status {
  color: var(--ti-image-credits-error);
}

.ti-image-credits[data-ti-image-credits-state="loading"]
  .ti-image-credits__status::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ti-image-credits-spin 0.8s linear infinite;
}

@keyframes ti-image-credits-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Liste: eine Spalte, eine Zeile pro Bild ---------- */

.ti-image-credits__list {
  display: flex;
  flex-direction: column;
  gap: var(--ti-image-credits-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ti-image-credits__list:empty {
  display: none;
}

.ti-image-credits__item {
  display: flex;
  align-items: center;
  gap: var(--ti-image-credits-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- Thumbnail (feste Maße gegen Layout-Shift) ---------- */

.ti-image-credits__thumb-wrap {
  flex: 0 0 auto;
  width: var(--ti-image-credits-thumb-width);
  height: var(--ti-image-credits-thumb-height);
  overflow: hidden;
  background: var(--ti-image-credits-placeholder);
}

.ti-image-credits__thumb {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

/* ---------- Text ---------- */

.ti-image-credits__text {
  flex: 1 1 auto;
  min-width: 0;
}
.ti-image-credits__text p {
  color: #10203a;

  /* Body-Base/Body-Base-regular-desktop */
  font-family: "Aeonik", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%; /* 24.3px */
}

.ti-image-credits__credit {
  margin: 0;
  padding: 0;
  font-size: var(--ti-image-credits-font-size);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*
 * Dateiname und Dateityp: im Design nicht vorgesehen, daher ausgeblendet.
 * Zum Anzeigen diesen Block löschen.
 */
.ti-image-credits__details {
  display: none;
  margin: 0.125rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ti-image-credits-muted);
  overflow-wrap: anywhere;
}

.ti-image-credits__noscript {
  margin: 0;
  color: var(--ti-image-credits-muted);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .ti-image-credits {
    --ti-image-credits-font-size: 1.125rem;
    --ti-image-credits-gap: 0.875rem;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .ti-image-credits {
    --ti-image-credits-font-size: 1rem;
    --ti-image-credits-gap: 0.75rem;
    --ti-image-credits-thumb-width: 48px;
    --ti-image-credits-thumb-height: 36px;
    --ti-image-credits-max-height: 500px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-image-credits[data-ti-image-credits-state="loading"]
    .ti-image-credits__status::after {
    animation: none;
  }
}