/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Per-Viewport Focal-Point (v3.2.9)
   ─────────────────────────────────────────────────────────────────
   Tablet / Mobile bekommen eigene object-position für das
   wp-block-cover__image-background. CSS-Variablen vom Inspector
   gesetzt: --mup-focal-t (Tablet), --mup-focal-m (Mobile).
   Desktop nutzt das native style="object-position:..." von WP.
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: ab ≤ 1024 px, falls --mup-focal-t gesetzt */
@media (max-width: 1024px) {
  .wp-block-cover[data-mup-focal-t] > .wp-block-cover__image-background,
  .wp-block-cover[data-mup-focal-t] > img.wp-block-cover__image-background {
    object-position: var(--mup-focal-t) !important;
  }
}

/* Mobile: ab ≤ 640 px, falls --mup-focal-m gesetzt */
@media (max-width: 640px) {
  .wp-block-cover[data-mup-focal-m] > .wp-block-cover__image-background,
  .wp-block-cover[data-mup-focal-m] > img.wp-block-cover__image-background {
    object-position: var(--mup-focal-m) !important;
  }
}

/* Editor-Hint: ein dezenter Badge oben links wenn Per-Viewport-Fokus aktiv */
.editor-styles-wrapper .wp-block-cover[data-mup-focal-m]:before,
.editor-styles-wrapper .wp-block-cover[data-mup-focal-t]:before {
  content: "🎯 Per-Viewport-Bildausschnitt aktiv";
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(201, 168, 76, 0.92);
  color: #1f1a12;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}