/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Per-Block Responsive Everything (v3.2.12)
   ───────────────────────────────────────────────────────────────────
   Per-Device Padding/Margin/Font/Background/Color via CSS-Vars.
   Werte werden vom Inspector als Inline-Style gesetzt (--mup-pad-y etc.),
   die Media-Queries hier picken pro Breite den passenden Wert.

   Strategie: Tablet/Mobile-Vars sind FALLBACKS auf Desktop-Vars, wenn
   nicht gesetzt → Inheritance funktioniert wie erwartet.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── DESKTOP (default) ───────── */
.has-mup-resp {
  /* Padding */
  padding-top:    var(--mup-pad-y, inherit);
  padding-bottom: var(--mup-pad-y, inherit);
  padding-left:   var(--mup-pad-x, inherit);
  padding-right:  var(--mup-pad-x, inherit);
  /* Margin */
  margin-top:    var(--mup-marg-y, inherit);
  margin-bottom: var(--mup-marg-y, inherit);
  /* Schrift */
  font-size: var(--mup-font, inherit);
}
/* Hintergrund nur setzen wenn Var existiert (sonst überschreibt es Theme-BG) */
.has-mup-resp[style*="--mup-bg"] { background-color: var(--mup-bg); }
.has-mup-resp[style*="--mup-fg"] { color: var(--mup-fg); }

/* ───────── TABLET (≤ 1024 px) ───────── */
@media (max-width: 1024px) {
  .has-mup-resp {
    padding-top:    var(--mup-pad-y-t, var(--mup-pad-y, inherit));
    padding-bottom: var(--mup-pad-y-t, var(--mup-pad-y, inherit));
    padding-left:   var(--mup-pad-x-t, var(--mup-pad-x, inherit));
    padding-right:  var(--mup-pad-x-t, var(--mup-pad-x, inherit));
    margin-top:     var(--mup-marg-y-t, var(--mup-marg-y, inherit));
    margin-bottom:  var(--mup-marg-y-t, var(--mup-marg-y, inherit));
    font-size:      var(--mup-font-t, var(--mup-font, inherit));
  }
  .has-mup-resp[style*="--mup-bg-t"] { background-color: var(--mup-bg-t) !important; }
  .has-mup-resp[style*="--mup-fg-t"] { color: var(--mup-fg-t) !important; }
}

/* ───────── MOBILE (≤ 640 px) ───────── */
@media (max-width: 640px) {
  .has-mup-resp {
    padding-top:    var(--mup-pad-y-m, var(--mup-pad-y-t, var(--mup-pad-y, inherit)));
    padding-bottom: var(--mup-pad-y-m, var(--mup-pad-y-t, var(--mup-pad-y, inherit)));
    padding-left:   var(--mup-pad-x-m, var(--mup-pad-x-t, var(--mup-pad-x, inherit)));
    padding-right:  var(--mup-pad-x-m, var(--mup-pad-x-t, var(--mup-pad-x, inherit)));
    margin-top:     var(--mup-marg-y-m, var(--mup-marg-y-t, var(--mup-marg-y, inherit)));
    margin-bottom:  var(--mup-marg-y-m, var(--mup-marg-y-t, var(--mup-marg-y, inherit)));
    font-size:      var(--mup-font-m, var(--mup-font-t, var(--mup-font, inherit)));
  }
  .has-mup-resp[style*="--mup-bg-m"] { background-color: var(--mup-bg-m) !important; }
  .has-mup-resp[style*="--mup-fg-m"] { color: var(--mup-fg-m) !important; }
}