/* ---------- Die Hervorhebung selbst ---------- */
.potd-feature {
  position: relative;
  height: 100%;
  min-height: 160px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0;
  background: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.potd-feature a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}
.potd-img {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.potd-feature a:hover .potd-img,
.potd-feature a:focus .potd-img { transform: scale(1.03); }

.potd-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 0;
  background: rgba(0, 0, 0, .65);
  color: #2982d4;
  font-size: .85em;
  font-weight: bold;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.potd-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  /* abgedunkeltes Band unter dem Bildtext; Stärke über --potd-caption-bg anpassbar */
  background: var(--potd-caption-bg, rgba(0, 0, 0, .65));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-size: 1.15em;
  line-height: 1.3;
  text-align: left;
}

/* ---------- Kachel im Miniaturen-Container ---------- */
.potd-tile {
  list-style: none;
  box-sizing: border-box;
}
.potd-tile .potd-feature { width: 100%; height: 100%; }
.potd-tile.potd-float { float: left; }
.potd-measuring > *,
.potd-grid > * { transition: none !important; }

/* Rastermodus: der Container wird zum CSS-Grid mit Kachelmaß */
.potd-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--potd-w));
  grid-auto-rows: minmax(var(--potd-h), auto);
  column-gap: var(--potd-gx);
  row-gap: var(--potd-gy);
  grid-auto-flow: dense;
  justify-content: center;
}
.potd-grid::before,
.potd-grid::after { display: none !important; }  /* Clearfix-Pseudoelemente würden Rasterzellen belegen */
.potd-grid > * {
  margin: 0 !important;
  float: none !important;
  /* Bootstrap-Spalten (col-*) bzw. feste Breiten auf die Rasterzelle umstellen */
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ---------- Fallback, wenn kein Miniaturen-Container gefunden wurde ---------- */
.potd-feature.potd-standalone {
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin: 1em auto;
}