/* Wrapper & Variablen */
.mpk-wrapper {
  --mpk-gap: 1rem;
  --mpk-pink: #ff2d8f;
  --mpk-text: #fff;
  --mpk-title: #111;

  /* Neu: Gestaltung des Bildrahmens */
  --mpk-image-bg: #ffffff;                /* Hintergrundfarbe des sichtbaren Randbereichs */
  --mpk-image-radius: 8px;                /* Eckenradius des Bildrahmens */
  --mpk-image-border: 0px;                /* Optional: 1px aktivieren für feine Umrandung */
  --mpk-image-border-color: rgba(0, 0, 0, .08);
}
.mpk-empty { color: #6c757d; }

/* Scroll-Snap Carousel */
.mpk-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mpk-viewport::-webkit-scrollbar { display: none; }

.mpk-track {
  display: flex;
  gap: var(--mpk-gap);
  padding: 0.25rem 0;
}

/* 3 pro View (Desktop) */
.mpk-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * var(--mpk-gap)) / 3);
  min-width: 0;
}
@media (max-width: 900px) {
  .mpk-card { flex-basis: 100%; }
}

/* Bild/Ratio */
/* A) 16:9 ? 1:1 für den Bildrahmen innerhalb der Kacheln */
.mpk-image-wrap .ratio-16x9 { --bs-aspect-ratio: 100% !important; }

/* B) Nie beschneiden: Bild vollständig anzeigen und zentrieren
   (Nicht-1:1 ? sichtbarer Rand durch Container-Hintergrund) */
.mpk-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Rahmen/Hintergrund für den sichtbaren Rand */
.mpk-image-wrap .ratio {
  background: var(--mpk-image-bg);
  border-radius: var(--mpk-image-radius);
  border: var(--mpk-image-border) solid var(--mpk-image-border-color);
  overflow: hidden; /* Radius sauber clippen */
}

/* Ribbon (Parallelogramm via skew, kompakt passend zum Text) */
.mpk-ribbon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--mpk-pink);
  color: var(--mpk-text);
  padding: 0.2rem 0.55rem;   /* kompakter als zuvor */
  transform: skew(-20deg);
  border-radius: 4px;        /* leichte Abrundung wirkt moderner */
  line-height: 1;
  z-index: 1001;
}

.mpk-ribbon .mpk-ribbon-text {
  display: inline-block;
  transform: skew(20deg);    /* Text zurück kippen */
  font-size: 0.85rem;        /* etwas kleiner als vorher */
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Ratio setzt width/height:100% auf alle direkten Kinder.
   Für die Badge explizit wieder auf auto zurücksetzen. */
.mpk-image-wrap.ratio > .mpk-ribbon {
  width: auto !important;
  height: auto !important;
}

/* Navigation (immer sichtbar; nur disabled) */
.mpk-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  z-index: 1002;
}
.mpk-prev { left: 0.25rem; }
.mpk-next { right: 0.25rem; }
.mpk-nav[disabled] { opacity: .45; cursor: default; }

/* Platzhalter (kleiner Fix: fehlende width-Angabe & Kommentar) */
.mpk-image-placeholder {
  background: linear-gradient(135deg, #ececec, #dcdcdc);
  width: 100%;
  height: 100%;
}

/* Meta & Chips */
.mpk-meta { color: #6c757d; }
.mpk-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.mpk-chip {
  background: #e8f5ee;
  color: #196a3b;
  border: 1px solid rgba(25,106,59,.2);
  border-radius: 999px;
  font-size: .75rem;
  padding: .125rem .5rem;
}
.mpk-chips-meta .mpk-chip {
  background: rgba(230, 242, 250, 1);
  border-color: rgba(25,106,59,.18);
  color: #1c5e34;
}